Android UI设计(引导界面):ViewPager之三PagerTabStrip与PagerTitleStrip添加标题栏的区别
2015-09-03 17:05
543 查看
一、为什么学习添加标题栏
简单的引导界面我们已将学习完了,那么为什么还要学习添加标题栏呢?如果添加上标题栏会不会很丑呢?之前学习的时候,做完了简单的效果我也觉得挺难看的,但是看了微信的界面(如上图所示)才深有体会。二、PagerTabStrip
PagerTabStrip的简单介绍
在学习PagerTabStrip的用法之前,先来简单介绍一下它。 PagerTabStrip可以用来设置ViewPager的标题栏,它在标题栏下面会有一条灰色的指示线,指示当前的View对象,可以通过点击来切换,PagerTabStrip在使用时会自动加载三个页卡,当前页卡的前一个页卡,当前页卡和当前页卡的后一个页卡。PagerTabStrip的使用
1、在布局文件中写入PagerTabStrip,在MainActivity中find2、利用
List<>给出title,并赋初值
3、在PagerAdapter构造器中传入title并重写getPageTitle()方法
4、在MainActivity中设置属性
布局
[code]<android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" > <android.support.v4.view.PagerTabStrip android:id="@+id/tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top" ></android.support.v4.view.PagerTabStrip>
title与传参
[code] private List<String> mtitle;
[code]mtab=(PagerTabStrip) findViewById(R.id.tab); /** * 为ViewPager设置页卡标题 * */ mtitle=new ArrayList<String>(); mtitle.add("第一个"); mtitle.add("第二个"); mtitle.add("第三个"); mtitle.add("第四个"); //传参 madapter=new MyPagerAdapter(mViews, mtitle);
Adapter中的重写
[code] @Override public CharSequence getPageTitle(int position) { return mtitle.get(position); }
设置属性
[code] //为PagerTabStrip设置属性 mtab.setBackgroundColor(Color.WHITE); mtab.setTextColor(Color.GRAY); mtab.setDrawFullUnderline(false); mtab.setTabIndicatorColor(Color.GREEN);
效果图与小结
通过图片的演示我们可以看到标题栏下面的指示线及其点击的效果
三、PagerTitleStrip
PagerTitleStrip也是用于添加标题栏的,也会自动加载三个页卡,但是标题栏下没有指示线,也没有点击事件。用法只需要在布局文件中添加,并创建title给Adapter传参数即可。这里需要注意,只要在布局中加了PagerTitleStrip,相应的PagerTabStrip的点击效果与指示线效果就会失效。
布局
一般PagerTabStrip与PagerTitleStrip不会出现在同一个布局中,为了看添加了PagerTitleStrip之后,PagerTabStrip是否还有效才这样添加的。[code]<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" > <android.support.v4.view.PagerTabStrip android:id="@+id/tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top" ></android.support.v4.view.PagerTabStrip> <android.support.v4.view.PagerTitleStrip android:id="@+id/tab1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" ></android.support.v4.view.PagerTitleStrip> </android.support.v4.view.ViewPager> </RelativeLayout>
效果图与小结
在上面的图片中我们可以看到PagerTitleStrip没有指示线也没有点击事件,而且有了它之后PagerTabStrip不会再生效。
四、PagerTabStrip与PagerTitleStrip区别
[code] PagerTabStrip与PagerTitleStrip区别有以下两点:
1、PagerTabStrip设置的标题栏下面有指示线,PagerTitleStrip设置的标题栏下面没有指示线。
2、PagerTabStrip是可以通过点击来实现页卡的切换的,而PagerTitleStrip没有点击效果。
五、大部分代码
MainActivity
[code]package com.example.viewpagergongcheng; import java.util.ArrayList; import java.util.List; import android.os.Bundle; import android.app.Activity; import android.graphics.Color; import android.support.v4.view.PagerTabStrip; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.Menu; import android.view.View; public class MainActivity extends Activity { private List<View> mViews; private MyPagerAdapter madapter; private ViewPager mviewpager; private PagerTabStrip mtab; private List<String> mtitle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mviewpager=(ViewPager) findViewById(R.id.viewpager); mtab=(PagerTabStrip) findViewById(R.id.tab); /** * 为ViewPager设置页卡标题 * */ mtitle=new ArrayList<String>(); mtitle.add("第一个"); mtitle.add("第二个"); mtitle.add("第三个"); mtitle.add("第四个"); //为PagerTabStrip设置属性 mtab.setBackgroundColor(Color.WHITE); mtab.setTextColor(Color.GRAY); mtab.setDrawFullUnderline(false); mtab.setTabIndicatorColor(Color.GREEN); /**为mViews初始化数据 * */ mViews=new ArrayList<View>(); initData(); madapter=new MyPagerAdapter(mViews, mtitle); mviewpager.setAdapter(madapter); mviewpager.setPageTransformer(true, new DepthPageTransformer()); } private void initData() { View view1=View.inflate(this, R.layout.view1, null); View view2=View.inflate(this, R.layout.view2, null); View view3=View.inflate(this, R.layout.view3, null); View view4=View.inflate(this, R.layout.view4, null); mViews.add(view1); mViews.add(view2); mViews.add(view3); mViews.add(view4); } }
PagerAdapter
[code]package com.example.viewpagergongcheng; import java.util.List; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; public class MyPagerAdapter extends PagerAdapter{ private List<View> mViews; private List<String> mtitle; public MyPagerAdapter(List<View> mViews, List<String> mtitle) { super(); this.mViews = mViews; this.mtitle = mtitle; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mViews.get(position)); } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(mViews.get(position)); return mViews.get(position); } /** * 返回页卡的数量 * */ @Override public int getCount() { // TODO Auto-generated method stub return mViews.size(); } /** * view是否来自于对象 * */ @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0==arg1; } /**设置页卡的标题 * */ @Override public CharSequence getPageTitle(int position) { return mtitle.get(position); } }
相关文章推荐
- jquey.fullpage详解
- UINavigaionController中的传值(协议)
- Android UI设计——ViewPage的无限循环(五)
- Arduino LM35温度检测
- RYU的GUI安装
- 黑马程序员—————Java基础--------GUI
- Android UI设计——ViewPage中自定义标题栏(四)
- UI触屏的操作初识
- 使用eventqueue.invokelater()好处、原因
- UIAlertView
- ios开发 UI阶段第八周
- UINavigationController
- 区间离散化+线段树区间求最值poj 3368 Frequent values
- Drupal安装百度编辑器Ueditor for wysiwyg
- iOS软件开发之在UIScrollView上添加手势不能触发解决办法
- this class is not key value coding-compliant for the key progressVIew
- 1056. Mice and Rice (25)
- [翻译]Cell 中的视图控制器
- iPhone开发之UITableView的小试牛刀 利用MVC模式从plist文件读取数据并字典转模型的格式实现
- iPhone开发UI组件UIDatePickerView的预习