Android中几个控件的使用

在这块我们主要学习Android Design Support Library 中控件的使用

    Android的ui设计中，控件的使用是我们经常遇到的问题，设计出一个好的页面，才能与用户更好地进行交互。

这是一个库，首先得进行下载，之后进行引用这个库：在 build.gradle 文件中加上这段代码： compile 'com.android.support:design:22.2.0

其中包含有

TextInputLayout

FloatingActionButton

Snackbar

Tabs

Navigation View

CoordinatorLayout 

CollapsingToolbarLayout 和AppBarLayout

下面是tabs和Navigation View的简单使用

Tabs

选项卡，一般和 TabLayout 一起使用。现在我们来看一下 TabLayout 的一些函数。

• addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加选项卡到 layout 中
• addTab(TabLayout.Tab tab, boolean setSelected) 同上
• addTab(TabLayout.Tab tab) 同上
• getTabAt(int index) 得到选项卡
• getTabCount() 得到选项卡的总个数
• getTabGravity() 得到 tab 的 Gravity
• getTabMode() 得到 tab 的模式
• getTabTextColors() 得到 tab 中文本的颜色
• newTab() 新建个 tab
• removeAllTabs() 移除所有的 tab
• removeTab(TabLayout.Tab tab) 移除指定的 tab
• removeTabAt(int position) 移除指定位置的 tab
• setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 为每个 tab 增加选择监听器
• setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 设置滚动位置
• setTabGravity(int gravity) 设置 Gravity
• setTabMode(int mode) 设置 Mode
• setTabTextColors(ColorStateList textColor) 设置 tab 中文本的颜色
• setTabTextColors(int normalColor, int selectedColor) 设置 tab 中文本的颜色 默认 选中
• setTabsFromPagerAdapter(PagerAdapter adapter) 设置 PagerAdapter
• setupWithViewPager(ViewPager viewPager) 和 ViewPager 联动

函数介绍完了，现在来看代码吧！布局代码：

  <android.support.design.widget.TabLayout    android:id="@+id/tablayout"    android:layout_width="match_parent"    android:background="#1FBCD2"    android:layout_height="48dp" />    

再来看一下 onCreate(Bundle savedInstanceState) 中的方法

 @Override protected void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setContentView(R.layout.activity_tab);   tabLayout= (TabLayout) findViewById(R.id.tablayout);   tabLayout.setTabTextColors(Color.WHITE, Color.GRAY);//设置文本在选中和为选中时候的颜色   tabLayout.addTab(tabLayout.newTab().setText("第一个"), true);//添加 Tab,默认选中   tabLayout.addTab(tabLayout.newTab().setText("第二个"),false);//添加 Tab,默认不选中   tabLayout.addTab(tabLayout.newTab().setText("第三个"),false);//添加 Tab,默认不选中}

来看一下效果吧

现在 我们来把 TabLayout 和 ViewPager 连起来用先看布局文件 我们在上面的基础上加了个ViewPager

<android.support.design.widget.TabLayout  android:id="@+id/tablayout"  android:layout_width="match_parent"  android:background="#1FBCD2"  android:layout_height="48dp" /><android.support.v4.view.ViewPager  android:id="@+id/vp"  android:layout_width="match_parent"  android:layout_height="match_parent" />  

再来看一下 onCreate(Bundle savedInstanceState) 中的方法吧

@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_tab);    tvs = new ArrayList<TextView>();    for (int i = 0; i < items.length; i++) {  TextView tv = new TextView(this);  tv.setText(items[i]);  LinearLayout.LayoutParams lp =    new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);  tv.setTextColor(Color.BLACK);  tv.setBackgroundColor(Color.WHITE);  tv.setGravity(Gravity.CENTER);  tv.setLayoutParams(lp);  tv.setTextSize(22);  tvs.add(tv);    }    tabLayout = (TabLayout) findViewById(R.id.tablayout);    tabLayout.setTabTextColors(Color.WHITE, Color.GRAY);//设置文本在选中和为选中时候的颜色    vp = (ViewPager) findViewById(R.id.vp);    adapter = new Adapter();    vp.setAdapter(adapter);    //用来设置tab的，同时也要覆写  PagerAdapter 的 CharSequence getPageTitle(int position) 方法，要不然 Tab 没有 title    tabLayout.setupWithViewPager(vp);    //关联 TabLayout viewpager    tabLayout.setTabsFromPagerAdapter(adapter);}

看效果图：

Navigation View

大家都记得 DrawerLayout 这个控件吧！它是 android 用来体态 SlideMenu 的一个组件！在这个控件中我们通常需要一个 menu（也是个布局文件）和一个主体布局文件。现在这个 Navigation View 就是用来写 menu的！这个控件我就不一一写函数了！我们还是直接使用吧！直接看布局文件

<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/drawer_layout"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:fitsSystemWindows="true">  <FrameLayout    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView      android:layout_width="match_parent"      android:layout_height="match_parent"      android:text="哈哈"      android:gravity="center"      android:textSize="30sp"      android:textColor="@android:color/background_dark"/>  </FrameLayout>  <android.support.design.widget.NavigationView    android:id="@+id/navigation"    android:layout_width="wrap_content"    android:layout_height="match_parent"    android:layout_gravity="start"    app:headerLayout="@layout/header"    app:menu="@menu/my_navigation_items" /></android.support.v4.widget.DrawerLayout>

我们直接看 NavigationView ，会发现我使用了两个新的属性 app:headerLayout和 app:menu 这是因为这个组件把menu分为两部分，一个是头部还有一个是 menu。现在我们只需要写个新的头部和一个 menu就行啦！！这个组件我就不上图了！主要是我认为没啥意思这个组件！