Android practical simple news client -- main interface design

Copy instance address: SimpleNews

This is a github open source project. The original project has four modules. My imitation here
One (News). Learn MD development and MVP architecture.

Home page layout:

Here we mainly use toolbar and DrawerLayout to achieve the effect of navigation bar and sideslip.
Of course, in order to fill the sidebar, the NavigationView control is also used.

toolbar and DrawerLayout

I've already mentioned in the previous blog post:
android – UI - sideslip drawerLayout
android – UI – navigation bar toolbar
NavigationView practice
When using ToolBar instead of actionbar, first remove the actionbar
Revise the theme:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

To use NavigationView, add a dependency:

    compile 'com.android.support:design:24.2.0'

New people need to know how to search dependency add: File - > project structure - > app - > dependencies - > green plus sign - > Library dependencies - > Search - > double click

Layout file: activity main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".Activity.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <include
            android:id="@+id/appbar"
            layout="@layout/toolbar" />

        <!-- Content -->
        <FrameLayout
            android:id="@+id/content_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/appbar" />
    </RelativeLayout>


    <!-- Drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_head"
        app:menu="@menu/drawer" />

</android.support.v4.widget.DrawerLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="5dp"
         />
</LinearLayout>

menu file to add options to the sidebar. And top layout

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_original"
            android:checked="true"
            android:icon="@mipmap/ic_launcher"
            android:title="Menu 1"/>

        <item
            android:id="@+id/navigation_library"
            android:icon="@mipmap/ic_launcher"
            android:title="Menu 2"/>
    </group>
</menu>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="?attr/colorPrimaryDark"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">
    
    <ImageView
        android:src="@mipmap/ic_launcher"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_marginTop="10dp"
        android:textSize="18sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="lw_zhaoritian"
        android:gravity="center"
       />
</LinearLayout>

Effect test:

toolbar is still empty and needs to be set in the code.

MainActivity:

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private Toolbar mToolbar;
    private NavigationView mNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open,
                R.string.close);
        mDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        mNavigationView = (NavigationView) findViewById(R.id.navigation);
        setupDrawerContent(mNavigationView);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            Toast.makeText(getApplicationContext(),
                 item.getTitle(), Toast.LENGTH_LONG).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        Toast.makeText(getApplicationContext(),
                                menuItem.getTitle(), Toast.LENGTH_LONG).show();
                        menuItem.setChecked(true);
                        mDrawerLayout.closeDrawers();
                        return true;
                    }
                });
    }
}

Test:

Explanation:
First: get the current toolbar to replace the previous actionbar

mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);

Step 1: add menu and event to toolbar android – UI – navigation bar toolbar

The second step:
Use ActionBarDrawerToggle class to make our toolbar and drawer display better.
Reference article: ActionBarDrawerToggle and ToolBar

ActionBarDrawerToggle is the listener for DrawerLayout events.
can

ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(getActivity(),  
                drawerLayout, toolBar, R.string.drawer_open, R.string.drawer_close){  
            @Override  
            public void onDrawerOpened(View drawerView) {  
                super.onDrawerOpened(drawerView);  
                if (!mUserLearnedDrawer && !mFromSavedInstanceState) {  
                    mUserLearnedDrawer = true;  
                    saveToPreferences(getActivity(), KEY_USER_LEARNED_DWARER, mUserLearnedDrawer + "");  
                }  
                getActivity().invalidateOptionsMenu();  
            }  
  
            @Override  
            public void onDrawerClosed(View drawerView) {  
                super.onDrawerClosed(drawerView);  
                getActivity().invalidateOptionsMenu();  
            }  
  
            @Override  
            public void onDrawerSlide(View drawerView, float slideOffset) {  
                if (slideOffset < 0.6) {  
                    toolBar.setAlpha(1 - slideOffset);  
                }  
            }  
        };  

There are three parameters when instantiating ActionBarDrawerToggle:

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open,
                R.string.close);
        mDrawerToggle.syncState();

To set DrawerLayout listening:

mDrawerLayout.setDrawerListener(mDrawerToggle);

To set the click event of the sideslip menu:

private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        Toast.makeText(getApplicationContext(),
                                menuItem.getTitle(), Toast.LENGTH_LONG).show();
                        menuItem.setChecked(true);
                        mDrawerLayout.closeDrawers();
                        return true;
                    }
                });
    }
85 original articles published, 40 praised, 240000 visitors+
Private letter follow

Tags: Android DrawerLayout xml encoding

Posted on Sat, 11 Jan 2020 05:06:19 -0500 by dustout