Material Design 是由 Google 的设计工程师们基于传统优秀的设计原则,结合丰富的创意和科学技术所发明的一套全新的界面设计语言,包含了视觉、运动、互动效果等特性。它是 Google 在2014年 Google I/O 大会上重磅推出了一套全新的界面设计语言,也是 Android 5.0 的新特性。
- layout\activity_tab_layout.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"
android:id="@+id/dl_main_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".TabLayoutActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ADBE107E"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nv_main_navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
DrawerLayout 标签包含了主界面的布局以及抽屉的布局,这个抽屉界面就是 NavigationView, NavigationView 标签下的 app:headerLayout=”” 可以引入头部文件, app:menu=”” 则引入菜单的布局。我们查看引入的头部文件 navigation_header.xml。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="?attr/colorPrimaryDark"
android:orientation="horizontal"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:background="@drawable/ic_user" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:text="_彼岸雨敲窗_"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textSize="20sp" />
</LinearLayout>
头部文件很简短,其中包含了一个 ImageView 用来显示图片,以及一个 TextView 用来显示文字。接下来看看 app:menu=”@menu/drawer_view” ,引入菜单文件drawer_view.xml,代码如下所示:
<?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_home"
android:icon="@drawable/ic_dashboard"
android:title="首页" />
<item
android:id="@+id/nav_messages"
android:icon="@drawable/ic_event"
android:title="事项" />
<item
android:id="@+id/nav_friends"
android:icon="@drawable/ic_headset"
android:title="音乐" />
<item
android:id="@+id/nav_discussion"
android:icon="@drawable/ic_forum"
android:title="消息" />
</group>
<item android:title="其他">
<menu>
<item
android:icon="@drawable/ic_dashboard"
android:title="设置" />
<item
android:icon="@drawable/ic_dashboard"
android:title="关于我们" />
</menu>
</item>
</menu>
菜单元素放在 group 标签之下,同时用 < grouop android:checkableBehavior=”single”> 声明每次只能有一个 item 被选中。在 menu 标签中包含4个 item,每个 item 又包含了 icon 和 title。
我们还可以通过为item添加子菜单来实现有头部的分组效果,每添加一个分组,都会在该组的最上面添加一根分割线已和普通的item进行区分。
- TabLayoutActivity.java逻辑代码如下:
package com.fukaimei.navigationview;
import android.support.design.widget.NavigationView;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.GravityCompat;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
public class TabLayoutActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
private ViewPager mViewPager;
private TabLayout mTabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar();
ab.setHomeAsUpIndicator(R.drawable.ic_menu);
ab.setDisplayHomeAsUpEnabled(true);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_main_drawer);
NavigationView navigationView =
(NavigationView) findViewById(R.id.nv_main_navigation);
if (navigationView != null) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
// 改变item选中状态
menuItem.setChecked(true);
String title = menuItem.getTitle().toString();
Toast.makeText(getApplicationContext(), title, Toast.LENGTH_SHORT).show();
//关闭导航菜单
mDrawerLayout.closeDrawers();
return true;
}
});
}
initViewPager();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_overaction, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
return true;
}
return super.onOptionsItemSelected(item);
}
private void initViewPager() {
mTabLayout = (TabLayout) findViewById(R.id.tabs);
List<String> titles = new ArrayList<>();
titles.add("精选");
titles.add("新闻");
titles.add("财经");
titles.add("娱乐");
titles.add("体育");
titles.add("科技");
titles.add("视频");
titles.add("图文");
titles.add("博客");
titles.add("股票");
titles.add("游戏");
titles.add("小说");
titles.add("直播");
for (int i = 0; i < titles.size(); i++) {
mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
}
List<Fragment> fragments = new ArrayList<>();
for (int i = 0; i < titles.size(); i++) {
fragments.add(new ListFragment());
}
FragmentAdapter mFragmentAdapteradapter =
new FragmentAdapter(getSupportFragmentManager(), fragments, titles);
//给ViewPager设置适配器
mViewPager.setAdapter(mFragmentAdapteradapter);
//将TabLayout和ViewPager关联起来。
mTabLayout.setupWithViewPager(mViewPager);
//给TabLayout设置适配器
mTabLayout.setTabsFromPagerAdapter(mFragmentAdapteradapter);
}
}
- Demo程序运行效果界面截图如下: