一: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;
}
}
}
}
另外在代码里面有用到XUtils库文件的代码:ViewUtils.inject(this);
将XUtils库文件的项目导入WorkSpace,并且和自己的项目关联就可以使用了。