Material Design使用集合-优快云博客

本文详细介绍了MaterialDesign风格下的TabLayout+ViewPager、FloatingActionButton、AppCompatSpinner、Toolbar等控件的使用方法及注意事项。

##一、描述
此文章说明Material Design类型的控件使用说明。

##二、控件使用方法

###1. TabLayout + ViewPager

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

      <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:background="?colorPrimary"
                android:layout_height="wrap_content"
                android:paddingBottom="4.0dip"
                app:tabIndicatorColor="@color/colorAccentReal"  //Tab指示器的颜色
                app:tabBackground="?selectableItemBackgroundBorderless"
                app:tabMinWidth="@dimen/tablayout_indicator_size_min" //Tab的宽度
                app:tabMaxWidth="@dimen/tablayout_indicator_size_max"
                app:tabSelectedTextColor="@color/colorPrimaryTextWhite" //Tab选中的选项卡文字的颜色
                app:tabTextColor="@color/colorSubTextWhite"
                app:tabGravity="center"
                app:tabMode="fixed" //两个模式 scrollable ：代表tab自适应宽度 fixed：固定宽度，平分宽度
                android:tag="bg_primary_color"/>

        <android.support.v4.view.ViewPager
            android:id="@+id/content_viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff" />
    </LinearLayout>

复制代码

<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textSize">12sp</item>
</style>
复制代码

代码

contentViewPager.setAdapter(new PagerFragmentAdapter(getSupportFragmentManager())); //ViewPager设置适配器
tabLayout.setupWithViewPager(contentViewPager); //TabLayout和VIewpager结合
//tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //设置他的模式,如果需要选项卡自适应宽度的话
复制代码

并且在适配器中重写Tab文本标题：

@Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
复制代码

重写Tab图片标题

 @Override
        public CharSequence getPageTitle(int position) {
            Drawable image = MainActivity.this.getResources().getDrawable(imageResId[position]);
            image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
            SpannableString sb = new SpannableString(" ");
            ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
            sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            return sb;
        }
复制代码

TabLayout控制Item选中的背景色解决方案：就是声明一个Secetor，点击和正常的颜色，然后再声明一个style,最后运用在TabLayout上就可以了

 <style name="MyTabLayout" parent="android:Widget">
        <item name="tabBackground">@drawable/bg_person_tab_background</item>
        <item name="tabIndicatorColor">#ff00ff</item>
        <item name="tabIndicatorHeight">0dp</item>
    </style>
复制代码

http://blog.youkuaiyun.com/u012045061/article/details/53423857

###2. FloatingActionButton

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="bottom|end"
        android:layout_margin="25dp"
        android:src="@mipmap/ic_launcher"
        app:backgroundTint="#31B566" //背景颜色
        app:elevation="10dp" //阴影深度
        app:fabSize="normal" //大小 另一个是 mini
        app:pressedTranslationZ="50dp" //按下的阴影深度
        app:rippleColor="@color/colorAccent"  />
复制代码

###3. AppCompatSpinner

<android.support.v7.widget.AppCompatSpinner
                android:id="@+id/main_spinner"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:overlapAnchor="false"    //这个属性是让下拉框显示在这个控件的下面
 />
复制代码

代码赋值

ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, data);
arrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
mainSpinner.setAdapter(arrayAdapter);
复制代码

###4. Toolbar
布局 ```


下面这个style是为了让标题栏的三个点成为白色
复制代码

设置标题字体颜色(可加)
复制代码

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColorPrimary">#968e48</item> <!--标题字体颜色-->
</style>
复制代码

ActionBar的标题menu文件
复制代码

<item
    android:id="@+id/action_settings"
    android:icon="@drawable/ic_menu_send"
    android:orderInCategory="100"
    android:title="@string/action_settings"
    app:showAsAction="always" />
<item
    android:id="@+id/search"
    android:icon="@mipmap/ic_launcher"
    android:title="dd"
    app:actionViewClass="android.support.v7.widget.SearchView"
    app:showAsAction="collapseActionView|always" />
复制代码

``` 创建菜单，并且对搜索按钮进行处理 ``` // 创建关联菜单 @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu);

    MenuItem searchItem = menu.findItem(R.id.search);
    SearchView mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    //设置搜索框hint内容
    mSearchView.setQueryHint("输入要搜索的内容...");
    SearchView.SearchAutoComplete textView = (SearchView.SearchAutoComplete)
            mSearchView.findViewById(R.id.search_src_text);
    //设置搜索框中输入文字的颜色
    textView.setTextColor(Color.BLACK);
    //搜索内容监听
    mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {

        @Override
        public boolean onQueryTextSubmit(String query) {
            Toast.makeText(MainActivity.this, query, Toast.LENGTH_SHORT).show();
            return false;
        }

        @Override
        public boolean onQueryTextChange(String newText) {
            Log.d("onQueryTextChange", newText);
            return false;
        }
    });

    return true;
}
复制代码

Menu点击事件
复制代码

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { String msg = ""; switch (item.getItemId()) { case R.id.action_ball: msg += "Click ball"; break; case R.id.action_tip: msg += "Click action_tip"; break; case R.id.action_menu: msg += "Click setting"; break; } Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show(); return false; } });

代码
复制代码

toolbar.setTitle("标题");//设置标题，必须在setSupportActionBar方法之前 setSupportActionBar(toolbar); toolbar.setNavigationIcon(R.mipmap.ic_launcher);//设置标题最左的图标 toolbar.setLogo(R.mipmap.ic_launcher_round); //设置一个Logo在左边图标的右侧 toolbar.setSubtitle("SubTit"); //设置子标题，在标题的下面



</br>
###5. 回退按钮

1 在布局的ActionBar中添加返回键图片
复制代码

app:navigationIcon="@drawable/ic_back"

2 在代码中处理返回事件
复制代码

@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { finishAfterTransition(); } else { finish(); } break; } return super.onOptionsItemSelected(item); }



</br>
###6. DrawerLayout侧滑
</br>
直接用官方给的侧滑模版就好
复制代码