（一）、仿优酷首页/微信首页的Tab切换(附源码)

时间：2022-06-04 05:45:03

（一）相信很多做android应用的朋友都做过相关类似优酷首页、微信首页Tab切换效果的App，也有不少新手朋友们在eoe论坛中提问该如何做，在这里提供一种方法，大家可以参考下，先看看完成后的效果图

（一）、仿优酷首页/微信首页的Tab切换(附源码)

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <RadioGroup
        android:id="@+id/grouplayout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal" >

        <RadioButton
             android:id="@+id/radio_my"
            android:background="@drawable/radio"
            android:textColor="@drawable/text_sel"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="我的" />

        <RadioButton
             android:id="@+id/radio_home"
            android:background="@drawable/radio"
            android:textColor="@drawable/text_sel"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="首页" />

        <RadioButton
             android:id="@+id/radio_recommend"
            android:background="@drawable/radio"
            android:textColor="@drawable/text_sel"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="推荐" />

        <RadioButton
             android:id="@+id/radio_channel"
            android:background="@drawable/radio"
            android:textColor="@drawable/text_sel"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="频道" />
    </RadioGroup>

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewPager"
        />


</LinearLayout>



再来看看优酷首页吧，咱们今天就是仿优酷首页Tab切换

（一）、仿优酷首页/微信首页的Tab切换(附源码)（一）、仿优酷首页/微信首页的Tab切换(附源码)



用到的知识点有：

1、ViewPager

2、Fragment

3、选择器

（二）、代码部分

1、设计思路很简单，首页就分为2个部分，上面一个RadioGroup，下面一个ViewPager，RadioGroup中包含“我的”，“首页”，“推荐”，‘频道’四个RadioButton，ViewPager中添加的是Fragment，具体"我的"里面的布局都可以在fragment中实现，下面是首页布局代码：

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <RadioGroup
        android:id="@+id/grouplayout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal" >

        <RadioButton
             android:id="@+id/radio_my"
            android:background="@drawable/radio"
            android:textColor="@drawable/text_sel"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="我的" />

        <RadioButton
             android:id="@+id/radio_home"
            android:background="@drawable/radio"
            android:textColor="@drawable/text_sel"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="首页" />

        <RadioButton
             android:id="@+id/radio_recommend"
            android:background="@drawable/radio"
            android:textColor="@drawable/text_sel"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="推荐" />

        <RadioButton
             android:id="@+id/radio_channel"
            android:background="@drawable/radio"
            android:textColor="@drawable/text_sel"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="频道" />
    </RadioGroup>

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewPager"
        />


</LinearLayout>

下面是首页代码，代码很简单，这里就不多少了，代码中也有注释 

package com.example.youku;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.ViewGroup;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.RadioButton;
import android.widget.RadioGroup;

public class MainActivity extends FragmentActivity implements
OnCheckedChangeListener

{
private ViewPager viewPager;
private RadioButton radio_my, radio_home, radio_recommend, radio_channel;
private RadioButton last_radio;//上次选中的RadioButton

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

private void init()
{
// 初始化radioButton
radio_my = (RadioButton) this.findViewById(R.id.radio_my);
radio_home = (RadioButton) this.findViewById(R.id.radio_home);
radio_recommend = (RadioButton) this.findViewById(R.id.radio_recommend);
radio_channel = (RadioButton) this.findViewById(R.id.radio_channel);
radio_my.setOnCheckedChangeListener(this);
radio_home.setOnCheckedChangeListener(this);
radio_recommend.setOnCheckedChangeListener(this);
radio_channel.setOnCheckedChangeListener(this);
last_radio = radio_my;
// 初始化radioButton数组
final RadioButton[] btns = { radio_my, radio_home, radio_recommend,
radio_channel };

// 初始化viewpager
viewPager = (ViewPager) this.findViewById(R.id.viewPager);
viewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
viewPager.setOnPageChangeListener(new OnPageChangeListener()
{

@Override
public void onPageSelected(int arg0)
{
btns[arg0].setChecked(true);
last_radio.setChecked(false);
last_radio = btns[arg0];
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2)
{

}

@Override
public void onPageScrollStateChanged(int arg0)
{

}
});

// 默认选中第一个
btns[0].setChecked(true);
}

class MyAdapter extends FragmentPagerAdapter
{

public MyAdapter(FragmentManager fm)
{
super(fm);
}

/**
 * 返回ViewPager中的fragment，ViewPager中的内容就是fragment
 */
public Fragment getItem(int arg0)
{
HomeFragment fragment = new HomeFragment();
<span style="white-space:pre"></span>//arg0就是0,1,2,3，分别代表：我的、首页、推荐、拼单，我们将位置传递到HomeFragment中，HomeFragment根据0,1,2,3初始化Bundle args = new Bundle();args.putInt("index", arg0);fragment.setArguments(args);return fragment;}@Overridepublic int getCount(){// 4个tab页面return 4;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object){}}public void onCheckedChanged(RadioGroup paramRadioGroup, int paramInt){}@Overridepublic void onCheckedChanged(CompoundButton paramCompoundButton,boolean paramBoolean){if (paramBoolean){switch (paramCompoundButton.getId()){case R.id.radio_my:viewPager.setCurrentItem(0);break;case R.id.radio_home:viewPager.setCurrentItem(1);break;case R.id.radio_recommend:viewPager.setCurrentItem(2);break;case R.id.radio_channel:viewPager.setCurrentItem(3);break;}}}}

那么接下来就是HomeFragment中的内容了，布局非常简单，就是一个TextView，如下： 

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:text="我的"
    android:gravity="center"
    android:textColor="#0000ee"
    android:textSize="25sp"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
</TextView>

代码很少，里面都有注释，如下： 

package com.example.youku;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * 本页面用于展示“我的”、“首页”，“推荐”，“频道”
 */
public class HomeFragment extends Fragment
{
private TextView textView;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
textView = (TextView) inflater.inflate(R.layout.fragment, null);
init();
return textView;

}

/**
 * 根据传递过来的数据，初始化
 */
private void init()
{
Bundle bundle = this.getArguments();
if (bundle == null)
return;
int index = bundle.getInt("index");
switch (index)
{
case 0:
textView.setText("我的");
break;
case 1:
textView.setText("首页");
break;
case 2:
textView.setText("推荐");
break;
case 3:
textView.setText("频道");
break;
}
}

}

至此，仿优酷首页的tab切换就完成了，那仿微信首页呢？其实微信首页就是把ViewPager放上面，RadioGroup放下面而已，只是微信中用到RadioButton中有个drawableTop属性而已

源码见：仿优酷微信首页Tab切换



标签：

相关文章