Android Material design设计风格
此Demo主要使用了以下控件：
DrawerLayout+CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+NavigationView+Snackbar 实现了抽屉效果 和滑动时Toolbar自动消失等效果
线上效果图：
在项目的gradle中添加 ：compile 'com.android.support:design:24.2.0'
首先看下布局文件：
其中ViewPager的 app:layout_behavior="@string/appbar_scrolling_view_behavior" 必须设置 否则滑动的时候Toolbar不会有消失的效果
AppbarLayout中设置的属性 app:elevation="0dp" 是为了防止Toolbar和Tablayout中间出现阴影效果
NavigationView控件中有两个属性 app:headerLayout和app:menu 从名字上可以看出 是头布局和菜单 是的 NavigationView 已经将抽屉的样式定义好了 就是头样式 + menu菜单 但是这些属性并不是必须两个都要声明。android:layout_gravity="start" 是定义NavigationView 的滑出效果 start|left 表示从左侧滑出 end|right 表示从右侧滑出。
头布局：
菜单布局：
在Activity中对这些空间进行处理：
处理Toolbar
mToolBar.setTitle("设计");
setSupportActionBar(mToolBar);设置Toolbar的标题 并将其设置给Activity。
处理TabLayout+ViewPager
ViewpageAdapter adapter = new ViewpageAdapter(getSupportFragmentManager(), titles);
mViewPager.setAdapter(adapter);
mTablayout.setTabMode(TabLayout.MODE_FIXED);
mTablayout.setTabGravity(TabLayout.GRAVITY_FILL);
mTablayout.setupWithViewPager(mViewPager);
mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition(), false);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
mTablayout.setupWithViewPager(mViewPager);是将TabLayout和ViewPager进行关联。setTabMode 设置TabLayout的样式 默认是TabLayout.MODE_FIXED表示不可滑动 另外还有一个TabLayout.MODE_SCROLLABLE 表示可以滑动，就是当TabLayout的条目很多的时候 是可以左右滑动切换Tab。setTabGravity 表示TabLayout的对齐方式，默认是TabLayout.GRAVITY_FILL 表示填充屏幕宽度 另外一个TabLayout.GRAVITY_CENTER 表示Tab居中紧凑显示
处理DrawLayout + NavigationView
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDrawLayout, mToolBar, R.string.toggle_start, R.string.toggle_end);
mDrawLayout.addDrawerListener(toggle);
toggle.syncState();
toggle.syncState(); 是在Toolbar上面添加图标 （三条杠）
TextView mHeaderTitle = (TextView) mNavigView.getHeaderView(0).findViewById(R.id.header_title);
mHeaderTitle.setText("我是头文件");
mNavigView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int itemId = item.getItemId();
switch (itemId) {
case R.id.menu_share:
Snackbar.make(mDrawLayout, "分享", Snackbar.LENGTH_SHORT).setAction("知道了", new View.OnClickListener() {
@Override
public void onClick(View view) {
}
}).show();
break;
case R.id.menu_search:
Snackbar.make(mDrawLayout, "搜索", Snackbar.LENGTH_SHORT).show();
break;
case R.id.menu_setting:
Snackbar.make(mDrawLayout, "设置", Snackbar.LENGTH_SHORT).show();
break;
case R.id.menu_about:
Snackbar.make(mDrawLayout, "关于", Snackbar.LENGTH_SHORT).show();
break;
}
mDrawLayout.closeDrawer(GravityCompat.START);
return true;
}
});
这个是处理抽屉控件 找到相关的控件并进行处理
最后贴上Activity全部代码：
public class MdActivity extends AppCompatActivity {
private TabLayout mTablayout;
private Toolbar mToolBar;
private ViewPager mViewPager;
public static final String[] titles = {"tab1", "tab2", "tab3", "tab4"};
private DrawerLayout mDrawLayout;
private NavigationView mNavigView;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.md_activity);
initViews();
initNavigationView();
}
private void initViews() {
mTablayout = (TabLayout) findViewById(R.id.tablayout);
mToolBar = (Toolbar) findViewById(R.id.toolbar);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mDrawLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mNavigView = (NavigationView) findViewById(R.id.navigation_view);
mToolBar.setTitle("设计");
setSupportActionBar(mToolBar);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDrawLayout, mToolBar, R.string.toggle_start, R.string.toggle_end);
mDrawLayout.addDrawerListener(toggle);
toggle.syncState();
ViewpageAdapter adapter = new ViewpageAdapter(getSupportFragmentManager(), titles);
mViewPager.setAdapter(adapter);
mTablayout.setTabMode(TabLayout.MODE_FIXED); //默认样式 其他：MODE_SCROLLABLE
mTablayout.setTabGravity(TabLayout.GRAVITY_FILL);//默认样式 其他 ：GRAVITY_CENTER
mTablayout.setupWithViewPager(mViewPager);
mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition(), false);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private void initNavigationView() {
TextView mHeaderTitle = (TextView) mNavigView.getHeaderView(0).findViewById(R.id.header_title);
mHeaderTitle.setText("我是头文件");
mNavigView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int itemId = item.getItemId();
switch (itemId) {
case R.id.menu_share:
Snackbar.make(mDrawLayout, "分享", Snackbar.LENGTH_SHORT).setAction("知道了", new View.OnClickListener() {
@Override
public void onClick(View view) {
}
}).show();
break;
case R.id.menu_search:
Snackbar.make(mDrawLayout, "搜索", Snackbar.LENGTH_SHORT).show();
break;
case R.id.menu_setting:
Snackbar.make(mDrawLayout, "设置", Snackbar.LENGTH_SHORT).show();
break;
case R.id.menu_about:
Snackbar.make(mDrawLayout, "关于", Snackbar.LENGTH_SHORT).show();
break;
}
mDrawLayout.closeDrawer(GravityCompat.START);
return true;
}
});
}
}
我是源码
