安卓日記——玩轉Material Design（NavigationView篇）
阿新 • • 發佈：2019-02-03
最近突然對Material Design感興趣，然後想看看怎麼玩。
首先要說的是NavigationView，就是我們經常要用到的側邊導航欄
在沒有NavigationView之前我們用的是普通的LinearLayout+ListView+頭部layout
NavitonView幫我們整合了這三部分，用起來也很方便
1.匯入material design的包
compile 'com.android.support:design:23.4.0'2.修改layout檔案
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 主layout就是那麼簡單
3.設定NavigationView頭部
新建一個layout，我這取名為nav_header
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="@color/colorPrimary"
android:padding="16dp"
android:layout_height="100dp">
<!--頭像-->
<ImageView
android:layout_alignParentLeft="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:id="@+id/ivProtrait"
android:src="@drawable/user"/>
<!--名字-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#fff"
android:text="jack"/>
</LinearLayout>記得要設定父佈局的高度，我這設為100dp
4.設定選單內容
新建一個menu，我取名為drawer_actions
<?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/navigation_item_home"
android:icon="@drawable/iconfont_home"
android:title="首頁" />
<item
android:id="@+id/navigation_item_discovery"
android:checked="true"
android:icon="@drawable/iconfont_source"
android:title="發現" />
<item
android:id="@+id/navigation_item_focus"
android:icon="@drawable/iconfont_blog"
android:title="關注" />
<item
android:id="@+id/navigation_item_collect"
android:icon="@drawable/iconfont_custom_view"
android:title="收藏" />
<item
android:id="@+id/navigation_item_round"
android:icon="@drawable/iconfont_custom_view"
android:title="圓桌" />
<item
android:id="@+id/navigation_item_message"
android:icon="@drawable/iconfont_custom_view"
android:title="私信" />
</group>
<!--其他item-->
<item android:title="其他">
<menu>
<item
android:id="@+id/navigation_item_switch_theme"
android:checkable="true"
android:title="切換主題" />
<item
android:id="@+id/navigation_item_about"
android:checkable="true"
android:title="設定" />
</menu>
</item>
</menu>5.寫介面的邏輯程式碼
NavigationView當然要配合Toobar和DrawerLayout來用啦
我在之前的安卓日記——設計簡潔好看的UI已經說過Drawerlayout和ToolBar怎麼用法，這裡就不想細說了
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private DrawerLayout mDrawerLayout;
// 左上角的標誌
private ActionBarDrawerToggle mDrawerToggle;
// 選單列表
private NavigationView navigationView;
// 之前選中NavigationVIew的Item
private MenuItem preMenuItem;
// NavigationView頭部的頭像
private ImageView ivProtrait;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
toolbar= (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mDrawerLayout= (DrawerLayout) findViewById(R.id.drawerLayout);
navigationView= (NavigationView) findViewById(R.id.nav_view);
//設定NavigationView的選項監聽
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
//如果之前有選項就把它設為沒有選中
if (preMenuItem!=null){
preMenuItem.setChecked(false);
}
switch (item.getItemId()){
case R.id.navigation_item_home:setTitle("首頁");break;
case R.id.navigation_item_discovery:setTitle("發現");break;
case R.id.navigation_item_focus:setTitle("關注");break;
case R.id.navigation_item_collect:setTitle("收藏");break;
case R.id.navigation_item_round:setTitle("圓桌");break;
case R.id.navigation_item_message:setTitle("私信");break;
}
preMenuItem=item;
//將當前選項設為選中
item.setChecked(true);
return false;
}
});
//後面的R.string.close,R.string.open好像沒什麼用，但一定要設
mDrawerToggle=new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.close,R.string.open);
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);
//獲得NavigationView的頭部view,從而繫結裡面的控制元件
View view=navigationView.getHeaderView(0);
ivProtrait= (ImageView)view.findViewById(R.id.ivProtrait);
ivProtrait.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"click",Toast.LENGTH_SHORT).show();
}
});
}