仿微信内容滑动底部Tab背景颜色渐变

最新推荐文章于 2016-12-15 22:43:02 发布

小齿轮

最新推荐文章于 2016-12-15 22:43:02 发布

阅读量1.7k

点赞数

分类专栏： ViewPager 文章标签： android开发仿微信 JazzyViewP

本文链接：https://blog.csdn.net/xiao_chilun/article/details/44303495

版权

ViewPager 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一：Demo使用到的开源的库使用到的开源库
1.master-JazzyViewPager主要就是用滑动渐变的viewpager
https://github.com/jfeinstein10/JazzyViewPager
2.NineOldAndroids-library超经典的一个动画库
https://github.com/JakeWharton/NineOldAndroids

二：新建一个Android项目
1. 将下载下来的JazzyViewPager-master开源代码中的src目录下的代码全部复制到自己项目的src目录下。

2. 将JazzyViewPager-master中res目录拷贝到项目的目录当中，将之前的res目录覆盖，然后我们只需要在这个res基础上去添加我们还需要的布局。

3. 可能从GitHub中下载的NineOldAndroids-library不是不能作为项目库文件导入，这时我们要将master-JazzyViewPager文件夹中lib\libs中的nineoldandroids-2.4.0.jar复制到自己项目中来。

4. 前期需要的代码准备完后，我们还需要修改一下JazzViewPager.java的代码。

a.在JazzViewPager类中定义callback接口,为了在onOptionsItemSelected方法中回调该接口，显示背景颜色的百分比。

public static interface SlideCallback {
        void callBack(int position, float positionOffset); 
    }

    private SlideCallback slideCallback = null;

    public void setSlideCallBack(SlideCallback slideCallBack) {
        this.slideCallback = slideCallBack;
    }

b.修改animateFade方法定义代码如下：

protected void animateFade(View left, View right, float positionOffset, int position) {
        if (left != null) {
            ViewHelper.setAlpha(left, 1-positionOffset);
             if (slideCallback != null) {
                 slideCallback.callBack(position, 1-positionOffset);
             }
        }
        if (right != null) {
            ViewHelper.setAlpha(right, positionOffset);
            if (slideCallback != null) {
                slideCallback.callBack(position+1, positionOffset);
            }
        }
    }

该方法在onPageScrolled方法中调用，又在callBack方法中去对两个布局设置背景颜色百分比。

5.代码修改完之后，下一步就是设计布局文件。
activity_main.xml代码

<TabHost xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/tabhost"    
    android:layout_width="fill_parent"    
    android:layout_height="fill_parent" >    

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

         <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:visibility="gone" >
        </FrameLayout>

        <com.jfeinstein.jazzyviewpager.JazzyViewPager
            xmlns:app="http://schemas.android.com/apk/res/com.example.bottommenuslidegradientswipe"
            android:id="@+id/jazzyPager"
            app:style="standard"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:visibility="visible" />
    </LinearLayout>

</TabHost>

main_tabwidget_layout.xml代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp" >

    <LinearLayout
        android:id="@+id/normalLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/normalImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/normalTV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/selectedLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/selectedImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/selectedTV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#CA464C"/>
    </LinearLayout>

</RelativeLayout>

1.TabWidget就是微信底部整块控件，TabHost指的是ViewPager和 TabWidget外面的一层布局。

2.在TabHost中要有一个FrameLayout布局，如果在main布局中没有的话汇报一个TabHost must have a FrameLayout whose id attribute is ‘android.R.id.tabcontent’异常。

3.TabHost、TabWidget 使用的Id是android系统分配的Id。

4.TabWidget中子Tab项就是main_tabwidget_layout.xml所展示的布局。

5.在TabHost中的那个帧布局一开始时隐藏的，但是在调用了setOnTabChangedListener方法之后变成可见的了，这个时候我们要在tabHost.getTabContentView().setVisibility(View.GONE);隐藏掉。

6.jazzyPager.setPageMargin(30); 设置页之间的间距。

7.jazzyPager.setFadeEnabled(true); 设为true之后，滑动的时候即将消失的一页会变暗，而且才可以有颜色渐变的效果。

8.两个布局normal和selected显示。

三、MainActivity.java代码

package com.example.weixincopy;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.app.ActionBar;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TextView;

import com.example.bottommenuslidegradientswipe.R;
import com.jfeinstein.jazzyviewpager.JazzyViewPager;
import com.jfeinstein.jazzyviewpager.JazzyViewPager.SlideCallback;
import com.jfeinstein.jazzyviewpager.JazzyViewPager.TransitionEffect;
import com.jfeinstein.jazzyviewpager.OutlineContainer;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;
import com.nineoldandroids.view.ViewHelper;

public class MainActivity extends Activity {  
    @ViewInject(R.id.jazzyPager)  
    private JazzyViewPager jazzyPager;  
    List<Map<String, View>> tabViews = new ArrayList<Map<String, View>>();  
    Context context;  
    public TabHost tabHost;  

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    @SuppressLint("NewApi")
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        ViewUtils.inject(this);  
        context = this;  
        ActionBar actionBar = getActionBar();  
        actionBar.setTitle("仿微信滑动底部背景颜色渐变");  
        // --------------------  
        tabHost = (TabHost) findViewById(android.R.id.tabhost);  
        tabHost.setup();  
        tabHost.addTab(tabHost.newTabSpec("0").setIndicator(createTab("微信", 0)).setContent(android.R.id.tabcontent));  
        tabHost.addTab(tabHost.newTabSpec("1").setIndicator(createTab("通讯录", 1)).setContent(android.R.id.tabcontent));  
        tabHost.addTab(tabHost.newTabSpec("2").setIndicator(createTab("发现", 2)).setContent(android.R.id.tabcontent));  
        tabHost.addTab(tabHost.newTabSpec("3").setIndicator(createTab("我", 3)).setContent(android.R.id.tabcontent));  
        // 点击tabHost 来切换不同的消息  
        tabHost.setOnTabChangedListener(new OnTabChangeListener() {  
            @Override  
            public void onTabChanged(String tabId) {  
                int index = Integer.parseInt(tabId);  
                setTabSelectedState(index, 4);  // 参数2：页数4
                tabHost.getTabContentView().setVisibility(View.GONE);// 隐藏content,就是那个帧布局  
                switch (index) {  
                    case 0:  
                        break;  
                    case 1:  
                        break;  
                    case 2:  
                        break;  
                    case 3:  
                        break;  
                }  
            }  
        });  
        tabHost.setCurrentTab(0);  
        initJazzyPager(TransitionEffect.Standard);  
    }  

    /** 
     * 创建 TabWidget的Tab项,设置normalLayout的alpha为1，selectedLayout的alpha为0
     * @param tabLabelText 
     * @param tabIndex 
     * @return 
     */  
    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    @SuppressLint("NewApi")
    private View createTab(String tabLabelText, int tabIndex) {  
        View tabIndicator = LayoutInflater.from(this).inflate(R.layout.main_tabwidget_layout, null);  
        ImageView normalImg = (ImageView) tabIndicator.findViewById(R.id.normalImg);  
        ImageView selectedImg = (ImageView) tabIndicator.findViewById(R.id.selectedImage);  
        TextView normalTV = (TextView) tabIndicator.findViewById(R.id.normalTV);  
        TextView selectedTV = (TextView) tabIndicator.findViewById(R.id.selectedTV);  
        normalTV.setText(tabLabelText);  
        selectedTV.setText(tabLabelText);  
        switch (tabIndex) {  
            case 0:  
                normalImg.setImageResource(R.drawable.home2);  
                selectedImg.setImageResource(R.drawable.home_press2);  
                break;  
            case 1:  
                normalImg.setImageResource(R.drawable.govaffairs2);  
                selectedImg.setImageResource(R.drawable.govaffairs_press2);  
                break;  
            case 2:  
                normalImg.setImageResource(R.drawable.newscenter2);  
                selectedImg.setImageResource(R.drawable.newscenter_press2);  
                break;  
            case 3:  
                normalImg.setImageResource(R.drawable.setting2);  
                selectedImg.setImageResource(R.drawable.setting_press2);  
                break;  
        }  
        View normalLayout = tabIndicator.findViewById(R.id.normalLayout);  
        normalLayout.setAlpha(1f);// 透明度显示  
        View selectedLayout = tabIndicator.findViewById(R.id.selectedLayout);  
        selectedLayout.setAlpha(0f);// 透明的隐藏  
        Map<String, View> map = new HashMap<String, View>();  
        map.put("normal", normalLayout);  
        map.put("selected", selectedLayout);  
        tabViews.add(map);  
        return tabIndicator;  
    }  

    /** 
     * 设置tab状态选中 
     * @param index 
     */  
    @SuppressLint("NewApi")
    private void setTabSelectedState(int index, int tabCount) {  
        for (int i = 0; i < tabCount; i++) {  
            if (i == index) {  
                tabViews.get(i).get("normal").setAlpha(0f);  
                tabViews.get(i).get("selected").setAlpha(1f);  
            } else {
                tabViews.get(i).get("normal").setAlpha(1f);  
                tabViews.get(i).get("selected").setAlpha(0f);  
            }  
        }  
        jazzyPager.setCurrentItem(index, false);// false表示 代码切换 pager  
                                                // 的时候不带scroll动画  
    }  

    @Override  
    protected void onResume() {  
        super.onResume();  
        setTabSelectedState(tabHost.getCurrentTab(), 4);  
    }  

    private void initJazzyPager(TransitionEffect effect) {  
        jazzyPager.setTransitionEffect(effect);  
        jazzyPager.setAdapter(new MainAdapter());  
        jazzyPager.setPageMargin(30);  
        jazzyPager.setFadeEnabled(true);  
        jazzyPager.setSlideCallBack(new SlideCallback() {  
            @Override  
            public void callBack(int position, float positionOffset) {  
                Map<String, View> map = tabViews.get(position);
//                System.out.println("position="+position+",positionOffset="+positionOffset);
                ViewHelper.setAlpha(map.get("selected"), positionOffset);  
                ViewHelper.setAlpha(map.get("normal"), 1 - positionOffset);  
            }
        });  
        jazzyPager.setOnPageChangeListener(new OnPageChangeListener() {  
            @Override  
            public void onPageSelected(int position) {  
                tabHost.setCurrentTab(position);  
            }  

            @Override  
            public void onPageScrolled(int paramInt1, float paramFloat, int paramInt2) {  
            }  

            @Override  
            public void onPageScrollStateChanged(int paramInt) {  
            }  
        });  
    }  

    @Override  
    public boolean onCreateOptionsMenu(Menu menu) {  
        menu.add("Toggle Fade");  
        String[] effects = this.getResources().getStringArray(R.array.jazzy_effects);  
        for (String effect : effects)  
            menu.add(effect);  
        return true;  
    }  

    @Override  
    public boolean onOptionsItemSelected(MenuItem item) {  
        if (item.getTitle().toString().equals("Toggle Fade")) {  
            jazzyPager.setFadeEnabled(!jazzyPager.getFadeEnabled());  
        } else {  
            TransitionEffect effect = TransitionEffect.valueOf(item.getTitle().toString());  
            initJazzyPager(effect);  
        }  
        return true;  
    }  

    private class MainAdapter extends PagerAdapter {  
        @Override  
        public Object instantiateItem(ViewGroup container, final int position) {  
            TextView text = new TextView(MainActivity.this);  
            text.setGravity(Gravity.CENTER);  
            text.setTextSize(30);  
            text.setTextColor(Color.WHITE);  
            text.setText("Page " + position);  
            text.setPadding(30, 30, 30, 30);  
            int bg = Color.rgb((int) Math.floor(Math.random() * 128) + 64, (int) Math.floor(Math.random() * 128) + 64, (int) Math.floor(Math.random() * 128) + 64);  
            text.setBackgroundColor(bg);  
            container.addView(text, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);  
            jazzyPager.setObjectForPosition(text, position);  
            return text;  
        }  

        @Override  
        public void destroyItem(ViewGroup container, int position, Object obj) {  
            container.removeView(jazzyPager.findViewFromObject(position));  
        }  

        @Override  
        public int getCount() {  
            return 4;  
        }  

        @Override  
        public boolean isViewFromObject(View view, Object obj) {  
            if (view instanceof OutlineContainer) {  
                return ((OutlineContainer) view).getChildAt(0) == obj;  
            } else {  
                return view == obj;  
            }  
        }  
    }  

}