仿微信内容滑动底部Tab背景颜色渐变
2015-03-16 12:01
381 查看
一: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方法中回调该接口,显示背景颜色的百分比。
b.修改animateFade方法定义代码如下:
该方法在onPageScrolled方法中调用,又在callBack方法中去对两个布局设置背景颜色百分比。
5.代码修改完之后,下一步就是设计布局文件。
activity_main.xml代码
main_tabwidget_layout.xml代码
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代码
另外在代码里面有用到XUtils库文件的代码:ViewUtils.inject(this);
将XUtils库文件的项目导入WorkSpace,并且和自己的项目关联就可以使用了。
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方法中回调该接口,显示背景颜色的百分比。
[code]public static interface SlideCallback { void callBack(int position, float positionOffset); } private SlideCallback slideCallback = null; public void setSlideCallBack(SlideCallback slideCallBack) { this.slideCallback = slideCallBack; }
b.修改animateFade方法定义代码如下:
[code]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代码
[code]<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代码
[code]<?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代码
[code]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,并且和自己的项目关联就可以使用了。
相关文章推荐
- Android 仿微信底部渐变Tab效果
- Android 仿微信底部渐变Tab(2)
- Android 仿微信底部渐变Tab
- 仿微信Tab颜色渐变自定义View
- Android 微信6.1 tab栏图标和字体颜色渐变的实现
- Android滑动切换页面Tab文字颜色发生渐变效果
- 实现微信tab颜色渐变效果
- 微信滑动底部菜单渐变效果
- Android 监听ScrollView滑动 实现布局背景、文本颜色渐变
- 如何解决iphone手机微信浏览器中滑动到页面底部出现黑色背景盖住position:fixed的页面元素的问题?
- 仿微信底部滑动菜单Tab
- Android ViewPager实现滑动切换页面+底部tab点击切换页面(类微信首页)
- Android 微信6.1 tab栏图标和字体颜色渐变的实现
- 仿微信底部栏图标切换时,颜色渐变效果
- 仿 QQ 底部 Tab 切换带数字提示的 RadioButton,支持自定义提示数字背景颜色、字体大小、字体颜色。后续将持续更新......
- 仿微信随手指滑动页面菜单图标文字颜色渐变
- 随笔:tab标签随手势左右滑动的渐变效果,类似微信
- Android中自定义ScrollView的滑动监听事件,并在滑动时渐变标题栏背景颜色
- 自定义控件--让背景颜色随ViewPager的滑动而渐变
- android开发之高仿微信6.0+滑动Tab