Interface no small matter (six): to make a good-looking side pull menu!

No trivial interface (a): RecyclerView+CardView to know

No trivial interface (two): RecyclerView to show more different views

Interface no trivial (three): RecyclerView + Toolbar to make a file selector

Interface no small matter (4): write a scroll selector!

Interface no small matter (five): custom TextView

Interface no small matter (six): to make a good-looking side pull menu!

Making portal

directory

• rendering
• preface
• DrawerLayout
• Toolbar
• fragment
• NavigationView
• CircleImageView
• The last

rendering

No nonsense, look at the effect, like to look at the source code:

preface

Let’s talk about the side pull menu. Now that phones are getting bigger, it’s not a good idea to display the entire side pull menu, because a lot of times, it’s not necessary. The content involved in this meeting is DrawerLayout, Toolbar, NavigationView, which are related to material Design.

DrawerLayout

Take a look at the main view layout code:

<? 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/dl_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.so.knowledge.ui.activity.DrawerLayout.DrawerActivity">

    <RelativeLayout
        android:id="@+id/ll_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_main"
            android:layout_width="match_parent"
            android:layout_height="? attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/username"
            android:textColor="@android:color/holo_blue_dark"
            android:textSize="@dimen/thirty_sp" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_fun_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="vertical" />
    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_user_info"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
Copy the code

Here we have three DrawerLayout options, android:layout_gravity=”end” for the right pull layout, Android :layout_gravity=”start” for the left pull layout, and nothing for the main layout. Specific details later, remember to guide the package:

compile 'com. Android. Support: design: 25.3.1'
Copy the code

Toolbar

The Toolbar is one I love to use, with lots of buttons, hidden Settings, etc., and still looks simple. I wrote about the use of toolbars in article 3. Then in the rendering, clicking on the left side of the Toolbar expands the left side menu. The menu content is what I wrote in the first article, the specific code is mdlmain.opendrawer (gravityCompat.start); Click the right button to expand the right menu, the code is mdlmain.opendrawer (gravityCompat.end); Menu on the right we’ll talk about it later.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            mDlMain.openDrawer(GravityCompat.START);
            break;

        case R.id.username:
            mDlMain.openDrawer(GravityCompat.END);
            break;
    }
    return true;
}
Copy the code

fragment

If you observe carefully, you will find that clicking the first and second buttons on the left menu will change the color of the string on the main interface. Actually, it is not only the color change, I replace the fragment. Of course, switching fragments is easy.

myRVAdapter.setOnItemClickListener(new MyRVAdapter.OnItemClickListener() {
    @Override
    public void onItemClick(View view, int position) {
        Toast.makeText(getApplicationContext(),
                "click: " + position, Toast.LENGTH_SHORT).show();
        FragmentTransaction ft = fm.beginTransaction();
        switch (position) {
            case 0:
                ft.replace(R.id.ll_content, new Fragment1());
                break;
            case 1:
                ft.replace(R.id.ll_content, new Fragment2());
                break;
            default:
                break;
        }
        ft.commit();
        mDlMain.closeDrawer(GravityCompat.START);
    }

    @Override
    public void onItemLongClick(View view, int position) {
        Toast.makeText(getApplicationContext(),
                "long click: "+ position, Toast.LENGTH_SHORT).show(); }});Copy the code

The most important thing I want to say is that even if you switch fragments, the Toolbar is still there.

NavigationView

This is used to implement the right menu. There are mainly two parts to be implemented, namely header and menu written in the layout file. Header is the layout code, while menu is the menu code. The CircleImageView section, I’ll talk about it later. Here is the menu part, set the two buttons as a radio item group, which is the same as the radio button group.

<android.support.design.widget.NavigationView
    android:id="@+id/nav_user_info"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="end"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/nav_menu" />
Copy the code

<? xml version="1.0" encoding="utf-8"? > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/hundred_eighty_dp"
    android:background="@color/colorPrimary"
    android:padding="@dimen/sixteen_dp">

    <de.hdodenhof.circleimageview.CircleImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/civ_avatar"
        android:layout_width="@dimen/sixty_four_dp"
        android:layout_height="@dimen/sixty_four_dp"
        android:layout_centerInParent="true"
        android:src="@drawable/avatar"
        app:civ_border_color="@android:color/white"
        app:civ_border_width="@dimen/two_dp" />

    <TextView
        android:id="@+id/tv_email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="@string/email"
        android:textColor="@android:color/white" />

    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/tv_email"
        android:text="@string/username"
        android:textColor="@android:color/white" />
</RelativeLayout>
Copy the code

<? xml version="1.0" encoding="utf-8"? > <menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_share"
            android:icon="@mipmap/ic_launcher"
            android:title="@string/share" />
        <item
            android:id="@+id/nav_loc"
            android:icon="@mipmap/ic_launcher"
            android:title="@string/loc" />
    </group>
</menu>
Copy the code

CircleImageView

This is a very useful open source project and is very simple to use. The purpose is to turn normal images into round images with white or black boxes. From the renderings, or very good.

The last

This is very simple, is the fusion of the previous content, and the use of Google side pull panel and menu panel to learn, thanks to Google, their implementation can be troublesome. Like to remember to like, have comments or suggestions in the comments section, secretly follow me is also ok ~