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) 中的方法吧

@Override
protected 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就行啦!!这个组件我就不上图了!主要是我认为没啥意思这个组件!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值