文档章节

ViewPager和FragmentPagerAdapter适配器实现微信tab界面 (可实现左右拖动切换界面)

linyuanbin
 linyuanbin
发布于 2016/10/16 14:37
字数 1120
阅读 29
收藏 0

效果:

一.主要步骤:

1.创建工程项目,建立四个Fragment.java文件(如 weixin_Fragment.java) 

2.建立四个tab.xml文件(如:tab01.xml)

3.创建top.xml文件(用于显示界面标题),bottom.xml文件(用于显示界面底下的四个ImageButton及对应textView)

4.完成activity_main.xml布局  (中间部分用ViewPager)

5.创建适配器:FragmentPagerAdapter

6.对需要的亮和暗色图片放入drawable中

二.代码实现:

 

1.Fragment.java文件格式:

如:

public class Weixin_Fragment extends Fragment {
@Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab01,container,false);
    }

 

2.tab.xml 代码格式:

如:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:text="This is Weixin Tab"
        android:textSize="30sp"
        android:gravity="center"
        android:textStyle="bold"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

(这里只是作为识别界面用所以比较简单,平常用可以进行扩展)

 

3.标题栏 top.xml格式:

如:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#464646"
    android:gravity="center"
    android:layout_height="55dp">

    <TextView
        android:gravity="center"
        android:text="微信"
        android:textSize="20sp"
        android:textColor="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

 

4.底部按钮布局:bottom.xml

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:background="#ffffff"
    android:layout_height="65dp">

    <LinearLayout
        android:id="@+id/tab_weixin"
        android:layout_width="0dp"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_height="match_parent">

        <ImageButton
            android:clickable="false"
            android:id="@+id/tab_weixin_img"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/weixin_anse"
            android:background="#0000"
             />

        <TextView
            android:text="微信"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_friend"
        android:layout_width="0dp"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_height="match_parent">

        <!--当点击图片按钮没有作用时可设置: android:clickable="false" 图片不可点击即让LinearLayout 去实现点击事件-->
        <ImageButton
            android:clickable="false"
            android:id="@+id/tab_friend_img"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/friend_anse"
            android:background="#00000000"
            />
        <!--android:background="#00000000"  设置为透明 和四个0效果一样-->

        <TextView
            android:text="朋友"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_address"
        android:layout_width="0dp"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_height="match_parent">

        <ImageButton
            android:clickable="false"
            android:id="@+id/tab_address_img"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/zhibo_anse"
            android:background="#00000000"  //八个0和四个0均表示透明
            />

        <TextView
            android:text="直播"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_setting"
        android:layout_width="0dp"  //宽度方向平分空间最好设为0dp
        android:orientation="vertical"
        android:layout_weight="1"  //分享剩余空间
        android:gravity="center"
        android:layout_height="match_parent">

        <ImageButton
            android:clickable="false"
            android:id="@+id/tab_setting_img"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/shezhi_anse"
            android:background="#00000000"
            />

        <TextView
            android:text="设置"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="0dp" />

    </LinearLayout>

</LinearLayout>

 

5.对主界面布局:

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

   <include layout="@layout/top"/>   //引入布局


    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"></android.support.v4.view.ViewPager>

    <include layout="@layout/bottom"/>  //引入布局
    
</LinearLayout>

 

中间部分是用ViewPager进行填充

 

 

6.MainActivity.java实现:

 

public class MainActivity extends FragmentActivity implements View.OnClickListener {

private ViewPager mViewPager;
    private Fragment tab01;
    private Fragment tab02;
    private Fragment tab03;
    private Fragment tab04;

    private FragmentPagerAdapter mAdapter;  //适配器
    private List<Fragment> list_fragment;   //复制容器

    private LinearLayout mTabweixin;
    private LinearLayout mTabFriend;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mImgWeixin;
    private ImageButton mImgFriend;
    private ImageButton mImgAddress;
    private ImageButton mImgSetting;



    private GoogleApiClient client;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initEvent();
        setSelect(0);
        //client = new GoogleApiClient.Builder(this).addApi(AppIndex.API).build();
    }

private void initEvent() {
mTabweixin.setOnClickListener(this);
        mTabFriend.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }

private void initView() {
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

        mTabweixin= (LinearLayout) findViewById(R.id.tab_weixin);
        mTabFriend= (LinearLayout) findViewById(R.id.tab_friend);
        mTabAddress= (LinearLayout) findViewById(R.id.tab_address);
        mTabSetting= (LinearLayout) findViewById(R.id.tab_setting);

        mImgWeixin= (ImageButton) findViewById(R.id.tab_weixin_img);
        mImgFriend= (ImageButton) findViewById(R.id.tab_friend_img);
        mImgAddress= (ImageButton) findViewById(R.id.tab_address_img);
        mImgSetting= (ImageButton) findViewById(R.id.tab_setting_img);

        //加载资源
        list_fragment=new ArrayList<Fragment>();
        Fragment tab01=new Weixin_Fragment();
        Fragment tab02=new Friend_Fragment();
        Fragment tab03=new Address_Fragment();
        Fragment tab04=new Setting_Fragment();
        list_fragment.add(tab01);
        list_fragment.add(tab02);
        list_fragment.add(tab03);
        list_fragment.add(tab04);

        mAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {  //适配器直接new出来
            @Override
            public Fragment getItem(int position) {
return list_fragment.get(position);//直接返回
            }

@Override
            public int getCount() {
return list_fragment.size();
            }

};


        mViewPager.setAdapter(mAdapter);  //加载适配器
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {  //监听界面拖动
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}
@Override
            public void onPageSelected(int position) {
int currentItem=mViewPager.getCurrentItem(); //获取当前界面
                resetImg();  //将所有图标变暗
                tab(currentItem); //切换图标亮度
            }
@Override
            public void onPageScrollStateChanged(int state) {

}

});

    } //initView

    private void tab(int i){  //用于屏幕脱拖动时切换底下图标,只在监听屏幕拖动中调用
        switch (i){
case 0:{
mImgWeixin.setImageResource(R.drawable.weixin_lang);
                break;
            }
case 1:

{
mImgFriend.setImageResource(R.drawable.shezhi_liang);
                break;
            }
case 2:

{
mImgAddress.setImageResource(R.drawable.zhibo_liang);
                break;
            }
case 3:

{
mImgSetting.setImageResource(R.drawable.shezhi_liang);
                break;
            }

}

}//tab()


    //自定义一个方法
    private void setSelect(int i){

mViewPager.setCurrentItem(i);//切换界面

    }  //setSelect()


    @Override
    public void onClick(View view) {  //设置点击的为;亮色
        resetImg();
        switch (view.getId()){
case R.id.tab_weixin:{

setSelect(0);
                mImgWeixin.setImageResource(R.drawable.weixin_lang);
                break;
            }
case R.id.tab_friend:

{

setSelect(1);
                mImgFriend.setImageResource(R.drawable.shezhi_liang);
                break;
            }
case R.id.tab_address:

{

setSelect(2);
                mImgAddress.setImageResource(R.drawable.zhibo_liang);
                break;
            }
case R.id.tab_setting:

{

setSelect(3);
                mImgSetting.setImageResource(R.drawable.shezhi_liang);
                break;
            }


}


} //onclick()


//设置按钮暗色
    private void resetImg() {
mImgWeixin.setImageResource(R.drawable.weixin_anse);
        mImgFriend.setImageResource(R.drawable.friend_anse);
        mImgAddress.setImageResource(R.drawable.zhibo_anse);
        mImgSetting.setImageResource(R.drawable.shezhi_anse);
    }


}

 

项目地址:https://github.com/linyuanbin/FragmentPagerAdapter.git 

 

 

 

© 著作权归作者所有

linyuanbin
粉丝 0
博文 2
码字总数 1681
作品 0
吉林
程序员
私信 提问
Android ViewPager使用详解

这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等...

Remix_jx
2014/10/27
282
0
android中ViewPager详解--视图滑动、界面卡等效果 (一)

这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一。利用它,我们可以做很多事情,从最简单的导航,到页面菜单...

一别经年
2014/01/21
4.8K
0
打造属于自己的安卓Metro界面

前言: 各位小伙伴,又到了每周更新文章了时候了,本来是周日能发出来呢,这不是赶上清明节吗,女王大人发话了,清明节前两天半陪她玩,只留给我周一下午半天时间写博客,哪里有女王哪里就有...

东辉在线
2015/04/08
1K
0
一起学Android之ViewPager

本文以一个简单的小例子,简述在Android开发中ViewPager的常见用法,仅供学习分享使用。 概述 ViewPager是一个支持使用者左右滑动的布局管理控件,可以通过一个实现的(适配器)PageAdapter...

Alan.hsiang
2019/01/27
0
0
Android Tab大总结 Fragment+TabPageIndicator+ViewPager

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24740977 Android现在实现Tab类型的界面方式越来越多,今天就把常见的实现方式给大家来个总结。目前写了: 1、传统的V...

JayPark不作死
2014/10/08
4.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

如何使用Selenium WebDriver截屏

有谁知道是否可以使用Selenium WebDriver截屏? (注:不是硒RC) #1楼 吉顿 import org.openqa.selenium.OutputType as OutputTypeimport org.apache.commons.io.FileUtils as FileUtils......

技术盛宴
27分钟前
4
0
高阶函数

定义:能够包装函数的,使原本函数增加一些额外的福利的函数 比如: function higherOrderFn(fn){} 能够对fn增加一些额外的福利 应用场景: (function () { var getLogin = functio...

gtandsn
32分钟前
9
0
架构师成长之后

小致Daddy
34分钟前
6
0
Git 介绍和日常命令

git 介绍 GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub。 GitHub于2008年4月10日正式上线,除了Git代码仓库托管及基本的 Web管理...

郭靖Michael
今天
9
0
技巧以管理R会话中的可用内存

人们使用什么技巧来管理交互式R会话的可用内存? 我使用下面的函数(基于Petr Pikal和David Hinds在2004年r-help列表中的发布)列出(和/或排序)最大的对象,并偶尔对其中一些对象进行rm() ...

javail
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部