在Google提供的控件中，在support-design及v4，v7包中，存在着很多符合MD标准的控件，这里罗列出一些常用的控件

TextInputLayout

这个控件在作为输入框的时候是极其方便及好用的，结合EditText使用

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     xmlns:app="http://schemas.android.com/apk/res-auto"
  6.     android:orientation="vertical">
  8.     <android.support.design.widget.TextInputLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         app:counterEnabled="true"
  12.         app:counterMaxLength="10">
  14.         <EditText
  15.             android:layout_width="match_parent"
  16.             android:layout_height="wrap_content"
  17.             android:hint="请输入用户名" />
  18.     </android.support.design.widget.TextInputLayout>
  20.     <EditText
  21.         android:layout_width="match_parent"
  22.         android:layout_height="wrap_content"
  23.         android:hint="请输入密码" />
  25.     <Button
  26.         android:layout_width="match_parent"
  27.         android:layout_height="wrap_content"
  28.         android:text="登录" />
  30. </LinearLayout>

效果

SearchView

搜索功能，位于ActionBar的位置

首先需要编写menu布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <menu xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     tools:context=".MainActivity">
  7.     <item android:id="@+id/menu_search"
  8.         android:orderInCategory="100"
  9.         app:showAsAction="always"
  10.         app:actionViewClass="android.support.v7.widget.SearchView"
  11.         android:title="search"/>
  12.     <item android:id="@+id/menu_share"
  13.         android:orderInCategory="100"
  14.         app:showAsAction="ifRoom"
  15.         android:icon="@android:drawable/ic_menu_share"
  16.         android:title="share" />
  17. </menu>

然后复写onCreateOptionsMenu()方法

  1. public class MainActivity extends AppCompatActivity {
  3.     @Override
  4.     protected void onCreate(Bundle savedInstanceState) {
  5.         super.onCreate(savedInstanceState);
  6.         setContentView(R.layout.activity_main);
  7.     }
  9.     @Override
  10.     public boolean onCreateOptionsMenu(Menu menu) {
  11.         getMenuInflater().inflate(R.menu.main, menu);
  12.         MenuItem menuItem = menu.findItem(R.id.menu_search);
  13.         final SearchView searchView = (SearchView) MenuItemCompat.getActionView(menuItem);
  14.         //显示搜索框
  15.         //searchView.setIconified(false);
  16.         //显示搜索框，且其不能被隐藏
  17.         searchView.setIconifiedByDefault(false);
  18.         //显示提交按钮，这里可以获取到id，设置自定义图片
  19.         ImageView icon = (ImageView) searchView.findViewById(R.id.search_go_btn);
  20.         icon.setImageResource(R.mipmap.ic_launcher);
  21.         icon.setVisibility(View.VISIBLE);
  22.         //设置监听
  23.         icon.setOnClickListener(new View.OnClickListener() {
  24.             @Override
  25.             public void onClick(View v) {
  26.                 Toast.makeText(MainActivity.this, searchView.getQuery(), Toast.LENGTH_SHORT).show();
  27.             }
  28.         });
  29.         //获取id，从而设置提示
  30.         EditText edit = (EditText) searchView.findViewById(R.id.search_src_text);
  31.         edit.setHint("请输入搜索的内容");
  33.         searchView.setSubmitButtonEnabled(true);
  34.         //SearchView还有很多设置监听选项，例如提交监听，文本监听
  36.         return true;
  37.     }
  38. }

效果如下：

Toolbar

顶部导航栏。用于显示标题，返回，菜单等，最开始是使用的ActionBar

由于ActionBar的种种使用不便，再加上拓展性差，google后来推出了Toolbar，为了增强其功能，现在还有APPbar可供使用

首先还是要把主题设置为NoActionBar

  1. <resources>
  3.     <!-- Base application theme. -->
  4.     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  5.         <!-- Customize your theme here. -->
  6.         <item name="colorPrimary">@color/colorPrimary</item>
  7.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  8.         <item name="colorAccent">@color/colorAccent</item>
  9.     </style>
  11. </resources>

然后使用Toolbar布局，由于ToolBar继承自ViewGroup，所以其是一个容器

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity">
  9.     <android.support.v7.widget.Toolbar
  10.         android:id="@+id/toolbar"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="wrap_content"
  13.         android:background="?attr/colorPrimary"
  14.         app:logo="@mipmap/ic_launcher"
  15.         app:navigationIcon="@drawable/abc_ic_ab_back_material"
  16.         app:subtitle="子标题"
  17.         app:subtitleTextColor="@android:color/white"
  18.         app:title="主标题"
  19.         app:titleTextColor="@color/colorAccent">
  20.         <!--<TextView-->
  21.         <!--android:layout_width="wrap_content"-->
  22.         <!--android:layout_height="wrap_content"-->
  23.         <!--android:layout_gravity="center"-->
  24.         <!--android:text="这里是标题"/>-->
  25.     </android.support.v7.widget.Toolbar>
  27. </LinearLayout>

最后设置Toolbar到活动，并设置监听

  1. public class MainActivity extends AppCompatActivity {
  3.     private Toolbar toolbar;
  5.     @Override
  6.     protected void onCreate(Bundle savedInstanceState) {
  7.         super.onCreate(savedInstanceState);
  8.         setContentView(R.layout.activity_main);
  9.         toolbar = findViewById(R.id.toolbar);
  10.         setSupportActionBar(toolbar);
  11.         toolbar.setNavigationOnClickListener(new View.OnClickListener() {
  12.             @Override
  13.             public void onClick(View v) {
  14.                 finish();
  15.             }
  16.         });
  17.     }
  18. }

测试效果如下

接下来实现Toolbar的隐藏效果

这样的效果实现思路就是Toolbar在上层，后面的布局在下层，后面的布局设置padding，然后再滑动过程中监听滑动距离，设置Toolbar的透明度

  1. interface TranslucentListener {
  2.     //透明度的回调监听 alpha:0~1
  3.     void onTranlucent(float alpha);
  4. }

自定义ScrollView，在onScrollChanged()中监听

  1. public class MyScrollView extends ScrollView {
  2.     private TranslucentListener translucentListener;
  4.     public void setTranslucentListener(TranslucentListener translucentListener) {
  5.         this.translucentListener = translucentListener;
  6.     }
  8.     public MyScrollView(Context context, AttributeSet attrs) {
  9.         super(context, attrs);
  10.     }
  12.     @Override
  13.     protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  14.         super.onScrollChanged(l, t, oldl, oldt);
  15.         if (translucentListener != null) {
  16.             Log.d("cj5785", "onScrollChanged");
  17.             int scrollY = getScrollY();
  18.             int screen_height = getContext().getResources().getDisplayMetrics().heightPixels;
  19.             //滑出1/3时候完全透明
  20.             if (scrollY <= screen_height / 3f) {
  21.                 translucentListener.onTranlucent(1 - scrollY / (screen_height / 3f));
  22.             }
  23.         }
  24.     }
  25. }

最后在活动中回调

  1. public class MainActivity extends AppCompatActivity implements TranslucentListener{
  3.     private Toolbar toolbar;
  4.     private MyScrollView scrollView;
  6.     @Override
  7.     protected void onCreate(Bundle savedInstanceState) {
  8.         super.onCreate(savedInstanceState);
  9.         setContentView(R.layout.activity_main);
  10.         toolbar = findViewById(R.id.toolbar);
  11.         setSupportActionBar(toolbar);
  12.         toolbar.setNavigationOnClickListener(new View.OnClickListener() {
  13.             @Override
  14.             public void onClick(View v) {
  15.                 finish();
  16.             }
  17.         });
  18.         scrollView = findViewById(R.id.scroll_view);
  19.         scrollView.setTranslucentListener(this);
  20.     }
  22.     @Override
  23.     public void onTranlucent(float alpha) {
  24.         toolbar.setAlpha(alpha);
  25.     }
  26. }

贴出布局

android:clipToPadding="false" 该控件的绘制范围是否不在Padding里面。false：绘制的时候范围会考虑padding即会往里面缩进

android:clipChildren="false" 子控件是否能不超出padding的区域（比如ScrollView上滑动的时候，child可以滑出该区域）

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity">
  9.     <com.cj5785.toolbartest.MyScrollView
  10.         android:id="@+id/scroll_view"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="match_parent"
  13.         android:clipChildren="false"
  14.         android:clipToPadding="false"
  15.         android:paddingTop="?attr/actionBarSize">
  17.         <android.support.v7.widget.LinearLayoutCompat
  18.             android:layout_width="match_parent"
  19.             android:layout_height="match_parent"
  20.             android:orientation="vertical">
  22.             <TextView
  23.                 android:layout_width="match_parent"
  24.                 android:layout_height="200dp"
  25.                 android:background="@android:color/holo_orange_light" />
  27.             <TextView
  28.                 android:layout_width="match_parent"
  29.                 android:layout_height="200dp"
  30.                 android:background="@android:color/holo_green_light" />
  32.             <TextView
  33.                 android:layout_width="match_parent"
  34.                 android:layout_height="200dp"
  35.                 android:background="@android:color/holo_blue_light" />
  37.             <TextView
  38.                 android:layout_width="match_parent"
  39.                 android:layout_height="200dp"
  40.                 android:background="@android:color/holo_red_light" />
  42.             <TextView
  43.                 android:layout_width="match_parent"
  44.                 android:layout_height="200dp"
  45.                 android:background="@android:color/holo_purple" />
  47.         </android.support.v7.widget.LinearLayoutCompat>
  48.     </com.cj5785.toolbartest.MyScrollView>
  50.     <android.support.v7.widget.Toolbar
  51.         android:id="@+id/toolbar"
  52.         android:layout_width="match_parent"
  53.         android:layout_height="?attr/actionBarSize"
  54.         android:background="?attr/colorPrimary"
  55.         app:logo="@mipmap/ic_launcher"
  56.         app:navigationIcon="@drawable/abc_ic_ab_back_material"
  57.         app:subtitle="子标题"
  58.         app:subtitleTextColor="@android:color/white"
  59.         app:title="主标题"
  60.         app:titleTextColor="@color/colorAccent">
  61.         <!--<TextView-->
  62.         <!--android:layout_width="wrap_content"-->
  63.         <!--android:layout_height="wrap_content"-->
  64.         <!--android:layout_gravity="center"-->
  65.         <!--android:text="这里是标题"/>-->
  66.     </android.support.v7.widget.Toolbar>
  68. </RelativeLayout>

实现效果：

CoordinatorLayout

监听滑动控件的滑动通过Behavior反馈到其他子控件并执行一些动画

这里的滑动控件指的是RecyclerView/NestedScrollView/ViewPager，意味着ListView、ScrollView不行

使用前需要添加support-design依赖

  1. implementation 'com.android.support:design:25.4.0'

布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity">
  9.     <android.support.v7.widget.RecyclerView
  10.         android:id="@+id/recycler_view"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="match_parent" />
  14.     <android.support.design.widget.FloatingActionButton
  15.         app:layout_behavior=".FABBehavior"
  16.         android:layout_width="wrap_content"
  17.         android:layout_height="wrap_content"
  18.         android:layout_gravity="bottom|end"
  19.         android:layout_margin="16dp" />
  21. </android.support.design.widget.CoordinatorLayout>

适配器

  1. public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
  3.     private List<String> list;
  5.     class MyViewHolder extends RecyclerView.ViewHolder {
  6.         private TextView textView;
  8.         public MyViewHolder(View itemView) {
  9.             super(itemView);
  10.             textView = (TextView) itemView.findViewById(android.R.id.text1);
  11.         }
  12.     }
  14.     public MyAdapter(List<String> list) {
  15.         this.list = list;
  16.     }
  18.     @Override
  19.     public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  20.         LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
  21.         View view = layoutInflater.inflate(android.R.layout.simple_list_item_1,parent,false);
  22.         MyViewHolder holder = new MyViewHolder(view);
  23.         return holder;
  24.     }
  26.     @Override
  27.     public void onBindViewHolder(MyViewHolder holder, int position) {
  28.         holder.textView.setText(list.get(position));
  29.     }
  31.     @Override
  32.     public int getItemCount() {
  33.         return list.size();
  34.     }
  35. }

Behavior

  1. public class FABBehavior extends FloatingActionButton.Behavior {
  3.     private boolean isShow;
  5.     public FABBehavior(Context context, AttributeSet attrs) {
  6.         super(context, attrs);
  7.     }
  9.     //依赖滑动开始回调
  10.     @Override
  11.     public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
  12.         //nestedScrollAxes 滑动的方向，这里我们依赖recyclerview，只关心其是否垂直滑动
  13.         return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
  14.                 || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
  15.     }
  17.     //依赖滑动过程回调
  18.     @Override
  19.     public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
  20.         super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
  21.         //根据情况执行动画
  22.         if (dyConsumed > 0 && isShow) {
  23.             isShow = false;
  24.             onHide(child);
  25.         } else if (dyConsumed < 0) {
  26.             isShow = true;
  27.             onShow(child);
  28.         }
  29.     }
  31.     private void onShow(FloatingActionButton fab) {
  32.         ViewCompat.animate(fab).scaleX(1f).scaleY(1f).start();
  33.     }
  35.     private void onHide(FloatingActionButton fab) {
  36.         ViewCompat.animate(fab).scaleX(0f).scaleY(0f).start();
  37.     }
  38. }

调用

  1. public class MainActivity extends AppCompatActivity {
  2.     private List<String> list = new ArrayList<>();
  3.     private RecyclerView recyclerView;
  4.     private MyAdapter adapter;
  5.     @Override
  6.     protected void onCreate(Bundle savedInstanceState) {
  7.         super.onCreate(savedInstanceState);
  8.         setContentView(R.layout.activity_main);
  9.         recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
  10.         recyclerView.setLayoutManager(new LinearLayoutManager(this));
  11.         for (int i = 0; i < 100; i++) {
  12.             list.add("item " + i);
  13.         }
  14.         adapter = new MyAdapter(list);
  15.         recyclerView.setAdapter(adapter);
  16.     }
  17. }

效果如下，实现了FloatingActionButton上划隐藏，下拉显示

AppBarLayout

AppBarLayout继承自LinearLayout，一般用于导航栏，其常见子控件为Toolbar，但同时又不局限于Toolbar，可以实现导航栏的多种综合效果，其作为容器，里面可以增加布局，按照需要去实现各种效果

这里做一个简单的演示，导航栏通过recyclerview的滑动而显隐的效果

首先依旧是要引入依赖

  1. implementation 'com.android.support:design:25.4.0'

然后编写布局，其外层为CoordinatorLayout，这里使用了预设behavior：appbar_scrolling_view_behavior，在监听的控件加上Flag设置，例如这里的app:layout_scrollFlags="scroll|enterAlways""

其Flag参数包括

scroll:将此布局和滚动时间关联。这个标识要设置在其他标识之前，没有这个标识则布局不会滚动且其他标识设置无效

enterAlways:任何向下滚动操作都会使此布局可见。这个标识通常被称为快速返回模式

enterAlwaysCollapsed：假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完

exitUntilCollapsed：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠

snap:当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。例如，如果视图只有底部25%显示，它将折叠。相反，如果它的底部75%可见，那么它将完全展开

snap：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity">
  9.     <android.support.v7.widget.RecyclerView
  10.         android:id="@+id/recycler_view"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="match_parent"
  13.         android:clipChildren="false"
  14.         android:clipToPadding="false"
  15.         app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  17.     <android.support.design.widget.AppBarLayout
  18.         android:layout_width="match_parent"
  19.         android:layout_height="wrap_content">
  21.         <android.support.v7.widget.Toolbar
  22.             android:layout_width="match_parent"
  23.             android:layout_height="?attr/actionBarSize"
  24.             android:layout_gravity="center"
  25.             android:background="?attr/colorPrimary"
  26.             app:layout_scrollFlags="scroll|enterAlways"
  27.             app:title="这是标题" />
  28.     </android.support.design.widget.AppBarLayout>
  30. </android.support.design.widget.CoordinatorLayout>

由于使用的是RecyclerView，故还需要适配器

  1. public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
  2.     private List<String> list;
  4.     class MyViewHolder extends RecyclerView.ViewHolder {
  5.         private TextView textView;
  7.         public MyViewHolder(View itemView) {
  8.             super(itemView);
  9.             textView = (TextView) itemView.findViewById(android.R.id.text1);
  10.         }
  11.     }
  13.     public MyAdapter(List<String> list) {
  14.         this.list = list;
  15.     }
  17.     @Override
  18.     public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  19.         LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
  20.         View view = layoutInflater.inflate(android.R.layout.simple_list_item_1,parent,false);
  21.         MyViewHolder holder = new MyViewHolder(view);
  22.         return holder;
  23.     }
  25.     @Override
  26.     public void onBindViewHolder(MyViewHolder holder, int position) {
  27.         holder.textView.setText(list.get(position));
  28.     }
  30.     @Override
  31.     public int getItemCount() {
  32.         return list.size();
  33.     }
  34. }

设置RecyclerView数据

  1. public class MainActivity extends AppCompatActivity {
  2.     private List<String> list = new ArrayList<>();
  3.     private MyAdapter adapter;
  4.     private RecyclerView recyclerView;
  6.     @Override
  7.     protected void onCreate(Bundle savedInstanceState) {
  8.         super.onCreate(savedInstanceState);
  9.         setContentView(R.layout.activity_main);
  10.         recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
  11.         recyclerView.setLayoutManager(new LinearLayoutManager(this));
  12.         for (int i = 0; i < 30; i++) {
  13.             list.add("item " + i);
  14.         }
  15.         adapter = new MyAdapter(list);
  16.         recyclerView.setAdapter(adapter);
  17.     }
  18. }

查看效果如下

ViewPager + TabLayout + Fragment + AppBarLayout

AppBarLayout同时还可以使用其他可滑动控件，例如NestedScrollView，其常用组合为：ViewPager + TabLayout + Fragment + AppBarLayout

由于这套组合的体验效果不错，这里展现一下这个样式的demo

首先依旧是引入依赖


因为使用了Toolbar，所以这里使用NoActionBar的主题

  1. <resources>
  3.     <!-- Base application theme. -->
  4.     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  5.         <!-- Customize your theme here. -->
  6.         <item name="colorPrimary">@color/colorPrimary</item>
  7.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  8.         <item name="colorAccent">@color/colorAccent</item>
  9.     </style>
  11. </resources>

编写ViewPager的Fragment布局，这里简单显示text，记得这里应该是一个滑动控件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="vertical">
  8.     <android.support.v4.widget.NestedScrollView
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         app:layout_behavior="@string/appbar_scrolling_view_behavior">
  13.         <TextView
  14.             android:id="@+id/text_view"
  15.             android:layout_width="match_parent"
  16.             android:layout_height="match_parent"
  17.             android:textColor="@android:color/black"
  18.             android:textSize="24sp" />
  19.     </android.support.v4.widget.NestedScrollView>
  20. </LinearLayout>

然后是自定义的fragment

  1. public class DefaultFragment extends Fragment {
  2.     @Nullable
  3.     @Override
  4.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  5.         View view = inflater.inflate(R.layout.fragment_layout,container,false);
  6.         TextView textView = (TextView) view.findViewById(R.id.text_view);
  7.         Bundle bundle = getArguments();
  8.         String title = bundle.getString("title");
  9.         textView.setText(title+"\n\n");
  10.         for (int i = 0; i < 10; i++) {
  11.             textView.append("这是一个ViewPager + TabLayout + Fragment + AppBarLayout测试用例\n\n");
  12.         }
  13.         return view;
  14.     }
  15. }

接下来是主布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical"
  8.     tools:context=".MainActivity">
  10.     <android.support.design.widget.AppBarLayout
  11.         android:layout_width="match_parent"
  12.         android:layout_height="wrap_content">
  14.         <android.support.v7.widget.Toolbar
  15.             android:layout_width="match_parent"
  16.             android:layout_height="?attr/actionBarSize"
  17.             android:background="?attr/colorPrimary"
  18.             app:layout_scrollFlags="scroll|enterAlways"
  19.             app:title="标题" />
  21.         <android.support.design.widget.TabLayout
  22.             android:id="@+id/table_layout"
  23.             android:layout_width="match_parent"
  24.             android:layout_height="wrap_content"
  25.             android:background="@android:color/holo_orange_light"
  26.             app:tabGravity="fill"
  27.             app:tabMode="scrollable" />
  28.     </android.support.design.widget.AppBarLayout>
  30.     <android.support.v4.view.ViewPager
  31.         android:id="@+id/view_pager"
  32.         android:layout_width="match_parent"
  33.         android:layout_height="match_parent"
  34.         app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  36. </android.support.design.widget.CoordinatorLayout>

最后关联TableLayout和ViewPager

  1. public class MainActivity extends AppCompatActivity {
  3.     private TabLayout tabLayout;
  4.     private ViewPager viewPager;
  5.     private String[] title = {
  6.             "新闻", "体育", "汽车", "科技", "手机", "数码", "读书", "艺术"
  7.     };
  9.     @Override
  10.     protected void onCreate(Bundle savedInstanceState) {
  11.         super.onCreate(savedInstanceState);
  12.         setContentView(R.layout.activity_main);
  13.         tabLayout = (TabLayout) findViewById(R.id.table_layout);
  14.         viewPager = (ViewPager) findViewById(R.id.view_pager);
  15.         MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
  16.         viewPager.setAdapter(adapter);
  17.         tabLayout.setupWithViewPager(viewPager);
  18.     }
  20.     class MyPagerAdapter extends FragmentPagerAdapter {
  22.         public MyPagerAdapter(FragmentManager fm) {
  23.             super(fm);
  24.         }
  26.         @Override
  27.         public CharSequence getPageTitle(int position) {
  28.             return title[position];
  29.         }
  31.         @Override
  32.         public Fragment getItem(int position) {
  33.             Fragment fragment = new DefaultFragment();
  34.             Bundle bundle = new Bundle();
  35.             bundle.putString("title", title[position]);
  36.             fragment.setArguments(bundle);
  37.             return fragment;
  38.         }
  40.         @Override
  41.         public int getCount() {
  42.             return title.length;
  43.         }
  44.     }
  45. }

这样就完成了显示功能

CollapsingToolbarLayout

这个控件可以实现Toolbar的折叠效果

先看下其常用参数

expandedTitleMargin：展开后的边距

statusBarScrim：状态栏颜色

contentScrim：内容颜色

app:layout_collapseMode：设置折叠模式，分为视差模式(parallax:在折叠的时候会有折叠视差效果，一般搭配layout_collapseParallaxMultiplier，视差的明显程度)，固定模式(pin：在折叠的时候最后固定在顶端，再和toolbar一起推出)，无模式(none：折叠时toolbar直接推出)

expandedTitleGravity：展开的位置

collapsedTitleGravity：折叠的位置

使用时依然需要导入依赖

  1. implementation 'com.android.support:design:25.4.0'

然后使用NoActionBar主题

使用时的布局示例

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity">
  9.     <android.support.v4.widget.NestedScrollView
  10.         android:layout_width="match_parent"
  11.         android:layout_height="match_parent"
  12.         app:layout_behavior="@string/appbar_scrolling_view_behavior">
  14.         <TextView
  15.             android:id="@+id/text_view"
  16.             android:layout_width="match_parent"
  17.             android:layout_height="match_parent"
  18.             android:text="@string/test_text"
  19.             android:textColor="@android:color/black"
  20.             android:textSize="24sp" />
  21.     </android.support.v4.widget.NestedScrollView>
  23.     <android.support.design.widget.AppBarLayout
  24.         android:layout_width="match_parent"
  25.         android:layout_height="180dp">
  27.         <android.support.design.widget.CollapsingToolbarLayout
  28.             android:layout_width="match_parent"
  29.             android:layout_height="match_parent"
  30.             app:layout_scrollFlags="scroll|exitUntilCollapsed"
  31.             app:expandedTitleMargin="8dp"
  32.             app:statusBarScrim="?attr/colorPrimary"
  33.             app:contentScrim="?attr/colorPrimary"
  34.             app:expandedTitleGravity="center"
  35.             app:collapsedTitleGravity="center"
  36.             app:title="现代诗歌欣赏">
  38.             <ImageView
  39.                 android:layout_width="match_parent"
  40.                 android:layout_height="match_parent"
  41.                 android:scaleType="centerCrop"
  42.                 android:src="@drawable/tdj"
  43.                 app:layout_collapseMode="parallax"
  44.                 app:layout_collapseParallaxMultiplier="0.5"/>
  46.             <android.support.v7.widget.Toolbar
  47.                 app:layout_collapseMode="pin"
  48.                 android:id="@+id/tool_bar"
  49.                 android:layout_width="match_parent"
  50.                 android:layout_height="?attr/actionBarSize"
  51.                 android:background="?attr/colorPrimary"/>
  52.         </android.support.design.widget.CollapsingToolbarLayout>
  53.     </android.support.design.widget.AppBarLayout>
  55. </android.support.design.widget.CoordinatorLayout>

设置Toolbar

  1. public class MainActivity extends AppCompatActivity {
  2.     private Toolbar toolbar;
  4.     @Override
  5.     protected void onCreate(Bundle savedInstanceState) {
  6.         super.onCreate(savedInstanceState);
  7.         setContentView(R.layout.activity_main);
  8.         toolbar = (Toolbar) findViewById(R.id.tool_bar);
  9.         toolbar.setNavigationIcon(R.mipmap.ic_launcher);
  10.         setSupportActionBar(toolbar);
  11.     }
  12. }

实现的效果如下图

高级UI-符合MD的常用控件的更多相关文章

  1. [WinForm]WinForm跨线程UI操作常用控件类大全

    前言 在C#开发的WinForm窗体程序开发的时候,经常会使用多线程处理一些比较耗时之类的操作.不过会有一个问题:就是涉及到跨线程操作UI元素. 相信才开始接触的人一定会遇上这个问题. 为了解决这个问 ...

  2. UI常用控件

    UICommonlyUsedControls [UI常用控件] 不需要学习多么深入,但是要知道系统提供的有用的控件. 一.UISwitch(开关) 二.UIActivityIndicatorView( ...

  3. 【Android Studio】安卓开发初体验3.1——UI设计之常用控件

    常用控件 首先对xml文件的编辑有三种模式 Code为纯代码 Split是一边代码,一边预览效果图 Designer就是有UI设计界面 TextView 用于在界面上显示一段文本信息 所有控件都可以在 ...

  4. Day3 UI:7种常用控件、4种基本布局

    Android常用控件 TextView <TextView android:id="@+id/text_view" android:layout_width="m ...

  5. Xamarin Studio在Mac环境下的配置和Xamarin.iOS常用控件的示例

    看过好多帖子都是Win环境装XS,Mac只是个模拟器,讲解在Mac环境下如何配置Xamarin Studio很少,也是一点点找资料,东拼西凑才把Xamarin Studio装在Mac上跑起来,如下: ...

  6. B/S一些小知识及常用控件

    一: B/S网页的运行 页面在设计的时候,本身就是一个类.在运行的时间,是一个对象. 其中aspx和aspx.cs是在同一个类下. aspx是主要是负责界面,而aspx.cs主要是负责数据逻辑. 呈现 ...

  7. 第32讲 UI组件之 时间日期控件DatePicker和TimePicker

    第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置,    Time ...

  8. 第31讲 UI组件之 Gallery画廊控件

    第31讲 UI组件之 Gallery画廊控件 1.Gallery的简介 Gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息.Gallery只 ...

  9. Windows Phone开发（10）：常用控件（上）

    原文:Windows Phone开发(10):常用控件(上) Windows Phone的控件有几个来源,和传统的桌面应用程序开发或Web开发一样,有默认提供的控件和第三方开者发布的控件.一般而言,如 ...

随机推荐

  1. Java Part 001( 03_01_数据类型和运算符 )

    注释 Java语言的注释一共有三种类型,分别是单行注释.多行注释和文档注释. 1. 单行注释 单行注释就是在程序中注释一行代码,在Java语言中,使用双斜线“//”进行单行注释. 2. 多行注释 多行 ...

  2. 002_软件安装之_keil4与keil5共存

    目的:实现keil4和keil5的共存 1. Keil4 主要用来开发 C51 程序 2. Keil5 也就是 MDK 主要用来开发 ARM 芯片,如 STM32 系列芯片 3. 资料下载地址:链接: ...

  3. sql server join ,inner join ,left join ,right join 的使用

    测试数据脚本 CREATE TABLE Atable ( S# INT, Sname nvarchar(32), Sage INT, Sfrom nvarchar(8) ) insert into A ...

  4. oracle 备份恢复之recover database的四条语句区别

    1  recover database using backup controlfile2  recover database until cancel3  recover database usin ...

  5. package.json文件说明解释

    1.package.json是什么? 什么是Node.js的模块(Module)?在Node.js中,模块是一个库或框架,也是一个Node.js项目.Node.js项目遵循模块化的架构,当我们创建了一 ...

  6. [Luogu] 外星密码

    https://www.luogu.org/problemnew/show/P1928 沙比提 读清题目 #include <bits/stdc++.h> using namespace ...

  7. 差分约束 4416 FFF 团卧底的后宫

    /* 4416 FFF 团卧底的后宫  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 你在某日收到了 FFF ...

  8. D-【乐】k进制数(同余)

    题目 https://ac.nowcoder.com/acm/contest/907/D 做法 \((x)_k\)定义编号,如果\(a+b\)加到一起能进一位,\(a+b\rightarrow 1+( ...

  9. Mixed Content: The page at ‘https://XXX’ was loaded over HTTPS, but requested an insecure........

    iframe引入视频的文件的时候报这个错 其实只要改成 加上一个s就好了  ...

  10. Lasso回归的坐标下降法推导

    目标函数 Lasso相当于带有L1正则化项的线性回归.先看下目标函数:RSS(w)+λ∥w∥1=∑Ni=0(yi−∑Dj=0wjhj(xi))2+λ∑Dj=0∣wj∣RSS(w)+λ∥w∥1=∑i=0 ...