Android(安卓)Material design设计风格

此Demo主要使用了以下控件：

DrawerLayout+CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+NavigationView+Snackbar 实现了抽屉效果和滑动时Toolbar自动消失等效果

线上效果图：

在项目的gradle中添加：compile 'com.android.support:design:24.2.0'

首先看下布局文件：

<?xml version="1.0" encoding="utf-8"?>

其中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 表示从右侧滑出。

头布局：

<?xml version="1.0" encoding="utf-8"?>

菜单布局：

<?xml version="1.0" encoding="utf-8"?>

在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;            }        });    }}

我是源码

更多相关文章

随机推荐