Android ViewPager+Fragment仿微信主界面(带底部图标切换动画)

1、布局

<?xml version="1.0" encoding="utf-8"?>
<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=".activity.SwitchViewpageImitationWeChatActivity">

    <LinearLayout
        android:id="@+id/ll_bottom"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:background="@color/white">

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

            <RelativeLayout
                android:id="@+id/rl_message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_message_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/message_normal"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_message_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/message_press"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_message_text_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/message"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_message_text_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/message"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>
        </LinearLayout>

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

            <RelativeLayout
                android:id="@+id/rl_contacts"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_contacts_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/contacts_normal"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_contacts_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/contacts_press"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_contacts_text_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/contacts"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_contacts_text_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/contacts"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>
        </LinearLayout>

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

            <RelativeLayout
                android:id="@+id/rl_discovery"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_discovery_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/discovery_normal"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_discovery_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/discovery_press"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_discovery_text_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/discovery"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_discovery_text_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/discovery"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>
        </LinearLayout>

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

            <RelativeLayout
                android:id="@+id/rl_me"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_me_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/me_normal"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_me_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/me_press"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_me_text_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/me"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_me_text_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/me"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>
        </LinearLayout>
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/ll_bottom" />
</RelativeLayout>

 

2、activity

public class SwitchViewpageImitationWeChatActivity extends FragmentActivity implements View.OnClickListener {
    private TextView tvMessageNormal, tvMessagePress, tvContactsNormal, tvContactsPress;
    private TextView tvDiscoveryNormal, tvDiscoveryPress, tvMeNormal, tvMePress;
    private TextView tvMessageTextNormal, tvMessageTextPress, tvContactsTextNormal, tvContactsTextPress;
    private TextView tvDiscoveryTextNormal, tvDiscoveryTextPress, tvMeTextNormal, tvMeTextPress;
    private ViewPager viewPager;

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

        initView();
    }

    protected void initView() {
        tvMessageNormal = (TextView) findViewById(R.id.tv_message_normal);
        tvMessagePress = (TextView) findViewById(R.id.tv_message_press);
        tvContactsNormal = (TextView) findViewById(R.id.tv_contacts_normal);
        tvContactsPress = (TextView) findViewById(R.id.tv_contacts_press);
        tvDiscoveryNormal = (TextView) findViewById(R.id.tv_discovery_normal);
        tvDiscoveryPress = (TextView) findViewById(R.id.tv_discovery_press);
        tvMeNormal = (TextView) findViewById(R.id.tv_me_normal);
        tvMePress = (TextView) findViewById(R.id.tv_me_press);
        tvMessageTextNormal = (TextView) findViewById(R.id.tv_message_text_normal);
        tvMessageTextPress = (TextView) findViewById(R.id.tv_message_text_press);
        tvContactsTextNormal = (TextView) findViewById(R.id.tv_contacts_text_normal);
        tvContactsTextPress = (TextView) findViewById(R.id.tv_contacts_text_press);
        tvDiscoveryTextNormal = (TextView) findViewById(R.id.tv_discovery_text_normal);
        tvDiscoveryTextPress = (TextView) findViewById(R.id.tv_discovery_text_press);
        tvMeTextNormal = (TextView) findViewById(R.id.tv_me_text_normal);
        tvMeTextPress = (TextView) findViewById(R.id.tv_me_text_press);

        findViewById(R.id.ll_message).setOnClickListener(this);
        findViewById(R.id.ll_contacts).setOnClickListener(this);
        findViewById(R.id.ll_discovery).setOnClickListener(this);
        findViewById(R.id.ll_me).setOnClickListener(this);

        setTransparency();
        tvMessagePress.getBackground().setAlpha(255);
        tvMessageTextPress.setTextColor(Color.argb(255, 69, 192, 26));

        /**ViewPager**/
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        MessageFragment weChatFragment = new MessageFragment();
        ContactsFragment contactsFragment = new ContactsFragment();
        DiscoveryFragment discoveryFragment = new DiscoveryFragment();
        MeFragment meFragment = new MeFragment();
        ArrayList<Fragment> fragmentList = new ArrayList<Fragment>();
        fragmentList.add(weChatFragment);
        fragmentList.add(contactsFragment);
        fragmentList.add(discoveryFragment);
        fragmentList.add(meFragment);
        viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList));
        viewPager.setCurrentItem(0);
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //根据ViewPager滑动位置更改透明度
                int diaphaneity_one = (int) (255 * positionOffset);
                int diaphaneity_two = (int) (255 * (1 - positionOffset));
                switch (position) {
                    case 0:
                        tvMessageNormal.getBackground().setAlpha(diaphaneity_one);
                        tvMessagePress.getBackground().setAlpha(diaphaneity_two);
                        tvContactsNormal.getBackground().setAlpha(diaphaneity_two);
                        tvContactsPress.getBackground().setAlpha(diaphaneity_one);
                        tvMessageTextNormal.setTextColor(Color.argb(diaphaneity_one, 153, 153, 153));
                        tvMessageTextPress.setTextColor(Color.argb(diaphaneity_two, 69, 192, 26));
                        tvContactsTextNormal.setTextColor(Color.argb(diaphaneity_two, 153, 153, 153));
                        tvContactsTextPress.setTextColor(Color.argb(diaphaneity_one, 69, 192, 26));
                        break;
                    case 1:
                        tvContactsNormal.getBackground().setAlpha(diaphaneity_one);
                        tvContactsPress.getBackground().setAlpha(diaphaneity_two);
                        tvDiscoveryNormal.getBackground().setAlpha(diaphaneity_two);
                        tvDiscoveryPress.getBackground().setAlpha(diaphaneity_one);
                        tvContactsTextNormal.setTextColor(Color.argb(diaphaneity_one, 153, 153, 153));
                        tvContactsTextPress.setTextColor(Color.argb(diaphaneity_two, 69, 192, 26));
                        tvDiscoveryTextNormal.setTextColor(Color.argb(diaphaneity_two, 153, 153, 153));
                        tvDiscoveryTextPress.setTextColor(Color.argb(diaphaneity_one, 69, 192, 26));
                        break;
                    case 2:
                        tvDiscoveryNormal.getBackground().setAlpha(diaphaneity_one);
                        tvDiscoveryPress.getBackground().setAlpha(diaphaneity_two);
                        tvMeNormal.getBackground().setAlpha(diaphaneity_two);
                        tvMePress.getBackground().setAlpha(diaphaneity_one);
                        tvDiscoveryTextNormal.setTextColor(Color.argb(diaphaneity_one, 153, 153, 153));
                        tvDiscoveryTextPress.setTextColor(Color.argb(diaphaneity_two, 69, 192, 26));
                        tvMeTextNormal.setTextColor(Color.argb(diaphaneity_two, 153, 153, 153));
                        tvMeTextPress.setTextColor(Color.argb(diaphaneity_one, 69, 192, 26));
                        break;
                }
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }

    /**
     * 设置透明度
     * 把press图片、文字全部隐藏
     */
    private void setTransparency() {
        tvMessageNormal.getBackground().setAlpha(255);
        tvContactsNormal.getBackground().setAlpha(255);
        tvDiscoveryNormal.getBackground().setAlpha(255);
        tvMeNormal.getBackground().setAlpha(255);
        tvMessagePress.getBackground().setAlpha(1);
        tvContactsPress.getBackground().setAlpha(1);
        tvDiscoveryPress.getBackground().setAlpha(1);
        tvMePress.getBackground().setAlpha(1);
        tvMessageTextNormal.setTextColor(Color.argb(255, 153, 153, 153));
        tvContactsTextNormal.setTextColor(Color.argb(255, 153, 153, 153));
        tvDiscoveryTextNormal.setTextColor(Color.argb(255, 153, 153, 153));
        tvMeTextNormal.setTextColor(Color.argb(255, 153, 153, 153));
        tvMessageTextPress.setTextColor(Color.argb(0, 69, 192, 26));
        tvContactsTextPress.setTextColor(Color.argb(0, 69, 192, 26));
        tvDiscoveryTextPress.setTextColor(Color.argb(0, 69, 192, 26));
        tvMeTextPress.setTextColor(Color.argb(0, 69, 192, 26));
    }

    @Override
    public void onClick(View v) {
        setTransparency();
        tvDiscoveryNormal.getBackground().setAlpha(255);
        switch (v.getId()) {
            case R.id.ll_message:
                viewPager.setCurrentItem(0, false);
                tvMessagePress.getBackground().setAlpha(255);
                tvMessageTextPress.setTextColor(Color.argb(255, 69, 192, 26));
                break;
            case R.id.ll_contacts:
                viewPager.setCurrentItem(1, false);
                tvContactsPress.getBackground().setAlpha(255);
                tvContactsTextPress.setTextColor(Color.argb(255, 69, 192, 26));
                break;
            case R.id.ll_discovery:
                viewPager.setCurrentItem(2, false);
                tvDiscoveryNormal.getBackground().setAlpha(0);
                tvDiscoveryPress.getBackground().setAlpha(255);
                tvDiscoveryTextPress.setTextColor(Color.argb(255, 69, 192, 26));
                break;
            case R.id.ll_me:
                viewPager.setCurrentItem(3, false);
                tvMePress.getBackground().setAlpha(255);
                tvMeTextPress.setTextColor(Color.argb(255, 69, 192, 26));
                break;
        }
    }

    private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
        private ArrayList<Fragment> list;

        public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> list) {
            super(fm);
            this.list = list;
        }

        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }

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

3、4个fragment随便创建新,图标和文字等

colors.xml:
<color name="white">#FFF</color>
<color name="black">#000</color>
<color name="green">#45C01A</color>
<color name="gray">#999</color>

string.xml:

<string name="message">微信</string>
<string name="contacts">通讯录</string>
<string name="discovery">发现</string>
<string name="me">我</string>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
A ViewPager is a layout manager that allows the user to swipe left and right to move between pages of data. In the case of a Fragment-based ViewPager, each page is represented by a Fragment. To use a ViewPager with Fragments, you need to do the following: 1. Create a layout file that contains a ViewPager element. 2. Create a Fragment class that will represent a single page in the ViewPager. This class should inflate a layout that contains any UI elements you want to display on the page. 3. Create an adapter class that extends FragmentPagerAdapter or FragmentStatePagerAdapter. This adapter will be responsible for creating and managing the Fragments that are displayed in the ViewPager. 4. Set the adapter on the ViewPager. Here's an example of how to create a Fragment-based ViewPager: 1. Create a layout file that contains a ViewPager element. For example: ``` <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2. Create a Fragment class that will represent a single page in the ViewPager. For example: ``` public class MyFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_my, container, false); // TODO: Set up UI elements in the layout return view; } } ``` 3. Create an adapter class that extends FragmentPagerAdapter or FragmentStatePagerAdapter. For example: ``` public class MyPagerAdapter extends FragmentPagerAdapter { public MyPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { // TODO: Return a new instance of MyFragment for the given position return null; } @Override public int getCount() { // TODO: Return the total number of pages return 0; } } ``` 4. Set the adapter on the ViewPager in your Activity or Fragment. For example: ``` ViewPager viewPager = findViewById(R.id.view_pager); MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); ``` That's it! You should now have a functioning Fragment-based ViewPager. Of course, you'll need to fill in the TODOs in the code snippets above to actually display content on the pages.

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值