ViewPager微信滑动效果

最新推荐文章于 2022-10-27 00:28:05 发布

ddmt6831

最新推荐文章于 2022-10-27 00:28:05 发布

阅读量236

点赞数

本文链接：https://blog.csdn.net/ddmt6831/article/details/54645173

版权

效果图 ---滑动渐变，点击不渐变

一、布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eee"
android:orientation="vertical" >

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

<include layout="@layout/bottom_bar" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ly_main_tab_bottom"
    android:layout_width="fill_parent"
    android:layout_height="55dp"
    android:layout_alignParentBottom="true"
    android:background="@drawable/bottom_bar" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="55dp" >

        <RelativeLayout
            android:id="@+id/id_tab_bottom_weixin"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:descendantFocusability="beforeDescendants"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/btn_tab_bottom_weixin"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/tab_weixin_normal"
                android:background="#0000"
                android:clickable="false" />
            <ImageButton
                android:id="@+id/btn_change"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#0000"
                android:clickable="false"
                android:src="@drawable/tab_weixin_pressed" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignRight="@+id/btn_tab_bottom_weixin"
                android:text="微信" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/id_tab_bottom_friend"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:descendantFocusability="beforeDescendants"
            android:gravity="center"
            android:orientation="vertical" >
            <ImageButton
                android:id="@+id/btn_tab_bottom_friend"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#0000"
                android:clickable="false"
                android:src="@drawable/tab_find_frd_normal" />
            <ImageButton
                android:id="@+id/btn_change1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#0000"
                android:clickable="false"
                android:src="@drawable/tab_find_frd_pressed" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignRight="@+id/btn_tab_bottom_friend"
                android:text="朋友" />
        </RelativeLayout>

         <RelativeLayout
            android:id="@+id/id_tab_bottom_contact"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:descendantFocusability="beforeDescendants"
            android:gravity="center"
            android:orientation="vertical" >

             <ImageButton
                android:id="@+id/btn_tab_bottom_contact"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="false"
                 android:background="#0000"
                android:src="@drawable/tab_address_normal" />
             <ImageButton
                 android:id="@+id/btn_change2"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:background="#0000"
                 android:clickable="false"
                 android:src="@drawable/tab_address_pressed" />

             <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/btn_tab_bottom_contact"
                android:layout_alignParentBottom="true"
                android:text="通讯录" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/id_tab_bottom_setting"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:descendantFocusability="beforeDescendants"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/btn_tab_bottom_setting"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#0000"
                android:clickable="false"
                android:src="@drawable/tab_settings_normal" />
            <ImageButton
                android:id="@+id/btn_change3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#0000"
                android:clickable="false"
                android:src="@drawable/tab_settings_pressed" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignRight="@+id/btn_tab_bottom_setting"
                android:text="设置" />

        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

3.代码

package com.example.mainframework03;

import java.util.ArrayList;
import java.util.List;


import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.ImageButton;
import android.widget.RelativeLayout;
import android.view.View;

public class MainActivity extends FragmentActivity {
    private int screenWidth;
    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mFragments = new ArrayList<Fragment>();
    boolean flag = true;//保证滑动时才执行方法
    private RelativeLayout mTabBtnWeixin;
    private RelativeLayout mTabBtnFrd;
    private RelativeLayout mTabBtnAddress;
    private RelativeLayout mTabBtnSettings;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        initView();
        mAdapter = new FargmentAdapter(getSupportFragmentManager(), mFragments);
        mViewPager.setAdapter(mAdapter);
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            private int currentIndex;

            @SuppressLint("NewApi")
            @Override
            public void onPageSelected(int position) {
                //点击改变图标，不渐变效果
                   if(!mflag){
                    switch (position) {
                    case 0:
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_weixin)).setBackgroundResource(R.drawable.tab_weixin_pressed);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_friend)).setBackgroundResource(R.drawable.tab_find_frd_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_contact)).setBackgroundResource(R.drawable.tab_address_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_setting)).setBackgroundResource(R.drawable.tab_settings_normal);
                        setAlphaColor(1.0f, 0.0f, 0.0f, 0.0f);
                        break;
                    case 1:
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_weixin)).setBackgroundResource(R.drawable.tab_weixin_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_friend)).setBackgroundResource(R.drawable.tab_find_frd_pressed);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_contact)).setBackgroundResource(R.drawable.tab_address_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_setting)).setBackgroundResource(R.drawable.tab_settings_normal);
                        setAlphaColor(0.0f, 1.0f, 0.0f, 0.0f);
                        break;
                    case 2:
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_weixin)).setBackgroundResource(R.drawable.tab_weixin_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_friend)).setBackgroundResource(R.drawable.tab_find_frd_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_contact)).setBackgroundResource(R.drawable.tab_address_pressed);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_setting)).setBackgroundResource(R.drawable.tab_settings_normal);
                        setAlphaColor(0.0f, 0.0f, 1.0f, 0.0f);
                        break;
                    case 3:
//                        ((ImageButton) MainActivity.this.findViewById(R.id.btn_tab_bottom_weixin)).setBackgroundResource(R.drawable.tab_weixin_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_friend)).setBackgroundResource(R.drawable.tab_find_frd_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_contact)).setBackgroundResource(R.drawable.tab_address_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_setting)).setBackgroundResource(R.drawable.tab_settings_pressed);
                        setAlphaColor(0.0f, 0.0f, 0.0f, 1.0f);
                        break;
            }
            }
            }
            //此方法用于底部渐变效果
            @SuppressLint("NewApi")
            @Override
            public void onPageScrolled(int position, float offset,
                                       int offsetPixels) {
               //左右滑动渐变效果
                if (flag) {
                    if (position == 0) {

                        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_change)).setAlpha(1 - offset);
                        if (offset == 0) {
                            ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_change1)).setAlpha(offset);
                            ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_change2)).setAlpha(offset);
                            ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_change3)).setAlpha(offset);
                        } else {
                            ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_change1)).setAlpha(offset);
                        }
                    } else if (position == 1) {
                        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_change1)).setAlpha(1 - offset);
                        if (offset == 0) {
                        } else {
                            ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_change2)).setAlpha(offset);
                        }
                    } else if (position == 2) {
                        if (offset == 0) {
                        } else {
                            ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_change3)).setAlpha(offset);
                        }
                        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_change2)).setAlpha(1 - offset);
                    }
                }
                if(offset==0) {
                    //滑动完后重新设置true
                    flag=true;
                }
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }
        boolean mflag=true;//控制点击，保证点击时才执行方法
    //底部图片点击事件
    public class txListener implements View.OnClickListener {
        private int index = 0;

        public txListener(int i) {
            index = i;
        }

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            mflag=false;
            mViewPager.setCurrentItem(index);
            flag = false;//控制左右滑动

        }
    }

    //初始化控件
    private void initView() {
        mTabBtnWeixin = (RelativeLayout) findViewById(R.id.id_tab_bottom_weixin);
        mTabBtnFrd = (RelativeLayout) findViewById(R.id.id_tab_bottom_friend);
        mTabBtnAddress = (RelativeLayout) findViewById(R.id.id_tab_bottom_contact);
        mTabBtnSettings = (RelativeLayout) findViewById(R.id.id_tab_bottom_setting);
        mTabBtnWeixin.setOnClickListener(new txListener(0));
        mTabBtnFrd.setOnClickListener(new txListener(1));
        mTabBtnAddress.setOnClickListener(new txListener(2));
        mTabBtnSettings.setOnClickListener(new txListener(3));
        MainTab01 tab01 = new MainTab01();
        MainTab02 tab02 = new MainTab02();
        MainTab03 tab03 = new MainTab03();
        MainTab04 tab04 = new MainTab04();
        mFragments.add(tab01);
        mFragments.add(tab02);
        mFragments.add(tab03);
        mFragments.add(tab04);
    }

    //此处主要功能点击底部更换图片
    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    public void setAlphaColor(float a, float b, float c, float d) {

        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_change)).setAlpha(a);
        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_change1)).setAlpha(b);
        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_change2)).setAlpha(c);
        ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_change3)).setAlpha(d);
        mflag=true;//选择底部图标完后重新设置true

    }
}

2>

package com.example.mainframework03;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class FargmentAdapter extends FragmentPagerAdapter {
   private List<Fragment> mFragments = new ArrayList<Fragment>();
   FargmentAdapter fargmentAdapter;
   public FargmentAdapter(FragmentManager fm,List<Fragment> listFramgent) {
      super(fm);
      this.mFragments=listFramgent;
      // TODO Auto-generated constructor stub
   }

   @Override
   public Fragment getItem(int arg0) {
      // TODO Auto-generated method stub
      return mFragments.get(arg0);
   }

   @Override
   public int getCount() {
      // TODO Auto-generated method stub
      return mFragments.size()==0? 0:mFragments.size();
   }

}