<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          Android仿摩拜單車側(cè)滑菜單

          共 6458字,需瀏覽 13分鐘

           ·

          2022-03-09 20:17

          曾經(jīng)的側(cè)滑菜單通常是使用SlidingMenu,但是用起來(lái)設(shè)置屬性太多,使用繁瑣。后來(lái)官方出來(lái)DrawerLayout,使側(cè)滑控件得以轉(zhuǎn)正,功能效果更佳。

          這里是我用DrawerLayout+NavigationView仿摩拜單車做的主界面。


          視覺(jué)效果:



          制作步驟:


          1、使用到了NavigationView,來(lái)自于design包,需添加依賴:

              compile 'com.android.support:design:26.0.0-alpha1'


          添加主布局,在activity_main.xml中:

          DrawerLayout有兩個(gè)子view,分別主界面布局和側(cè)滑界面布局:主界面頂部為Toolbar,側(cè)滑界面為NavigationView,需要給NavigationView設(shè)置:
          android:layout_gravity="start"
          屬性,表示從左側(cè)滑出,"end"表示從右側(cè)滑出。
          app:headerLayout="@layout/navigation_header"表示添加側(cè)邊頭布局
          app:menu="@menu/navigation_menu"表示添加列表菜單。

          2、activity_main代碼如下:
              android:layout_width="match_parent"    android:layout_height="match_parent"    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="wrap_content" android:orientation="vertical">
          android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="48dp" xmlns:android="http://schemas.android.com/apk/res/android">
          android:layout_width="80dp" android:layout_height="16dp" android:background="@mipmap/ic_mobike"/>
          android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@mipmap/location"/>
          android:id="@+id/navigationview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/navigation_header" app:menu="@menu/navigation_menu"/>


          3、navigation_header.xml頭布局:

              xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical">
          android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="20dp">
          android:id="@+id/iv_avator" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="25dp" android:background="@mipmap/internet_star"/>
          android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:textColor="#000" android:textStyle="bold" android:layout_marginTop="8dp" android:layout_toRightOf="@id/iv_avator" android:text="182****8234"/>
          android:id="@+id/tv_author" android:layout_width="wrap_content" android:layout_height="23dp" android:layout_marginTop="32dp" android:background="@drawable/btn_halftransparent_roundshape" android:gravity="center" android:layout_toRightOf="@id/iv_avator" android:text="信用積分 193 >" android:textColor="#fff" android:textSize="11sp"/>
          android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@mipmap/bg_header" android:scaleType="centerCrop"/>


          4、創(chuàng)建menu包,menu包下的navigation_menu菜單文件:


          android:icon="@mipmap/my_favorites" android:title="我的錢包"/>
          android:icon="@mipmap/my_competition" android:title="我的卡券"/>
          android:icon="@mipmap/my_honor" android:title="我的行程"/>
          android:icon="@mipmap/my_offline_cache" android:title="邀請(qǐng)好友"/>
          android:icon="@mipmap/my_help_and_feedback" android:title="我的貼紙"/>
          android:icon="@mipmap/my_set_up" android:title="設(shè)置"/>
          setSupportActionBar(toolbar)設(shè)置toolbar;
          setHomeButtonEnabled(true)設(shè)置是否使用自帶返回鍵;
          setDisplayHomeAsUpEnabled(true)給左上角圖標(biāo)的左邊加上一個(gè)返回的圖標(biāo) ;
          mDrawerLayout.setDrawerListener(mToggle)給drawerlayout設(shè)置開關(guān)事件觸發(fā)。


          toolbar = (Toolbar) findViewById(R.id.toolbar);        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);        navigationView = (NavigationView) findViewById(R.id.navigationview);        toolbar.setTitle("");        setSupportActionBar(toolbar);        getSupportActionBar().setHomeButtonEnabled(true);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
          mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.open,R.string.close){ @Override public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView);
          }
          @Override public void onDrawerClosed(View drawerView) { super.onDrawerClosed(drawerView);
          } };
          mToggle.syncState(); mDrawerLayout.setDrawerListener(mToggle);


          6、給菜單添加點(diǎn)擊事件:

                  navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(@NonNull MenuItem item) {                switch (item.getItemId()){                    case R.id.one:                        Toast.makeText(getApplicationContext(),"one",Toast.LENGTH_SHORT).show();                        break;                    case R.id.two:                        Toast.makeText(getApplicationContext(),"two",Toast.LENGTH_SHORT).show();                        break;                    case R.id.three:                        Toast.makeText(getApplicationContext(),"three",Toast.LENGTH_SHORT).show();                        break;                    case R.id.four:                        Toast.makeText(getApplicationContext(),"four",Toast.LENGTH_SHORT).show();                        break;                    case R.id.five:                        Toast.makeText(getApplicationContext(),"five",Toast.LENGTH_SHORT).show();                        break;                    case R.id.six:                        Toast.makeText(getApplicationContext(),"six",Toast.LENGTH_SHORT).show();                        break;                }                return true;            }        });


          MainActivity完整代碼:
          package com.example.drawerlayout;
          import android.support.annotation.NonNull;import android.support.design.widget.NavigationView;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;import android.view.MenuItem;import android.view.View;import android.widget.Toast;
          public class MainActivity extends AppCompatActivity { private Toolbar toolbar; private ActionBarDrawerToggle mToggle; private DrawerLayout mDrawerLayout; private NavigationView navigationView;
          @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);
          init(); }
          private void init() { toolbar = (Toolbar) findViewById(R.id.toolbar); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout); navigationView = (NavigationView) findViewById(R.id.navigationview); toolbar.setTitle(""); setSupportActionBar(toolbar); getSupportActionBar().setHomeButtonEnabled(true); getSupportActionBar().setDisplayHomeAsUpEnabled(true);
          mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.open,R.string.close){ @Override public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView);
          }
          @Override public void onDrawerClosed(View drawerView) { super.onDrawerClosed(drawerView);
          } };
          mToggle.syncState(); mDrawerLayout.setDrawerListener(mToggle);
          navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()){ case R.id.one: Toast.makeText(getApplicationContext(),"one",Toast.LENGTH_SHORT).show(); break; case R.id.two: Toast.makeText(getApplicationContext(),"two",Toast.LENGTH_SHORT).show(); break; case R.id.three: Toast.makeText(getApplicationContext(),"three",Toast.LENGTH_SHORT).show(); break; case R.id.four: Toast.makeText(getApplicationContext(),"four",Toast.LENGTH_SHORT).show(); break; case R.id.five: Toast.makeText(getApplicationContext(),"five",Toast.LENGTH_SHORT).show(); break; case R.id.six: Toast.makeText(getApplicationContext(),"six",Toast.LENGTH_SHORT).show(); break; } return true; } }); }}


          使用技巧:


          1、獲取頭布局控件:

                  View headerView = navigationView.getHeaderView(0);        ImageView ivAvatar = headerView.findViewById(R.id.iv_avator);


          默認(rèn)menu圖標(biāo)是灰色的,需要添加:
          app:itemIconTint="@color/blue"

          設(shè)置統(tǒng)一顏色,更改效果如下:



          若要還原icon的原本顏色,調(diào)用:
          navigationView.setItemIconTintList(null)
          使用原生原色。


          源碼地址:
          https://github.com/18380438200/DrawerLayout


          到這里就結(jié)束啦。
          瀏覽 71
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  一级日本欧美 | 国产无码AV毛片 | 大香蕉福利在线 | 久久免费的精品国产v∧ | 国产三级視频 |