1. 回顾
上篇实现了 底部菜单的实现 通过 fragment 和 ViewPager实现;
2.重点
(1)自定义ViewPager上面的TitleBar实现
(2)BadgeView消息红色点提示3.ViewPager 上面自定义 TitleBar实现
3.1 效果图
红点提示和自定义tabbar
3.2 基本思路
自已定义布局文件,后通过Viewpager 的 onPageChangeListener 事件 , 来监听 , 页面的变化 从而, 改变 titlebar 的 显示 效果;3.3自定义titlebar 布局实现
注意: 布局是很简单的 , 但是 在使用 BadgeView (红色的点 提示多少条)的时候,一定要在显示的textView 外面加上 一个布局 ,不管是 LiearLayout 还是 RelateLayout ,都可以 ,否则 ,TextView的文字不显示;<?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="40dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:background="#eeeeee"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_lianmeng"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="联盟"
android:textColor="#ee11cc"
android:textSize="20sp" />
<TextView
android:id="@+id/tv_juntuan"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="军团"
android:textColor="@android:color/black"
android:textSize="20sp" />
<LinearLayout
android:id="@+id/linear_badge"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1" >
<TextView
android:id="@+id/tv_tongshuai"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="统帅"
android:textColor="@android:color/black"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="@+id/tv_mvcolor"
android:layout_width="50dp"
android:layout_height="match_parent"
android:background="#abeeef" />
</LinearLayout>3.4 业务实现- ViewPager 适配器使用的是 FragmentPageAdapter
- ViewPager 子页面实现是通过 Fragment 实现
- OnPageChangeListener 实现
- BadgeView 红色提示点实现
package cn.labelnet.titlebardemo;
import java.util.ArrayList;
import java.util.List;
import android.annotation.SuppressLint;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Display;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.RelativeLayout;
import android.widget.TextView;
import cn.labelnet.adapter.VpkuwuAdapter;
import cn.labelnet.fragmemt.JuntuanFragment;
import cn.labelnet.fragmemt.LianMengFragment;
import cn.labelnet.fragmemt.TongshuaiFragment;
import com.readystatesoftware.viewbadger.BadgeView;
@SuppressLint("NewApi")
public class MainActivity extends FragmentActivity {
private ViewPager vp_ku;
private PagerTabStrip vp_title;
private String[] titles = { "联盟", "军团", "统帅" };
private List<Fragment> fragments;
/**
* 光标所在的 linearLayout
*/
private LinearLayout linear_badge;
/**
* titlebar上面的三个文字和 下面移动的光标
*/
private TextView tv_lianmeng, tv_juntuan, tv_tongshuai, tv_mvcolor;
/**
* 屏幕宽度的 1/3
*/
private int oneTitleBarWidth;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fragments = new ArrayList<Fragment>();
initView();
}
/**
* 初始化工作
*
*/
private void initView() {
vp_ku = (ViewPager) findViewById(R.id.vp_kuwu);
// vp_title = (PagerTabStrip) findViewById(R.id.vp_title);
// topbar
tv_lianmeng = (TextView) findViewById(R.id.tv_lianmeng);
tv_juntuan = (TextView) findViewById(R.id.tv_juntuan);
tv_mvcolor = (TextView) findViewById(R.id.tv_mvcolor);
tv_tongshuai = (TextView) findViewById(R.id.tv_tongshuai);
linear_badge = (LinearLayout) findViewById(R.id.linear_badge);
/**
* 初始化tv_mvcolor的 宽度 ,为 屏幕宽度的 1/3
*
*/
// 01.得到屏幕的宽度 , 后取1/3
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics();
display.getMetrics(outMetrics);
// 获得屏幕宽度
oneTitleBarWidth = outMetrics.widthPixels / 3;
Log.i("Main", "width=" + oneTitleBarWidth);
// 初始化 数据
LianMengFragment lianMengFragment = new LianMengFragment();
fragments.add(lianMengFragment);
JuntuanFragment juntuanFragment = new JuntuanFragment();
fragments.add(juntuanFragment);
TongshuaiFragment tongshuaiFragment = new TongshuaiFragment();
fragments.add(tongshuaiFragment);
// 设置 Adapter
VpkuwuAdapter vpkuwuAdapter = new VpkuwuAdapter(
getSupportFragmentManager(), fragments, titles);
vp_ku.setAdapter(vpkuwuAdapter);
// 设置监听事件
vp_ku.setOnPageChangeListener(new Vp_kuChangeListener());
}
/**
* ViewPager 切换 监听事件
*
* @author yuan
*
*/
class Vp_kuChangeListener implements OnPageChangeListener {
private int marignleft = 0;
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// 获得移动左边的距离
marignleft = (int) (oneTitleBarWidth * arg0 + oneTitleBarWidth
* arg1);
/**
* 给光标设置参数
*/
LayoutParams layoutParams = (LayoutParams) tv_mvcolor
.getLayoutParams();
layoutParams.leftMargin = marignleft;
layoutParams.width = oneTitleBarWidth;
tv_mvcolor.setLayoutParams(layoutParams);
}
@Override
public void onPageSelected(int arg0) {
resetTvColor();
setTvColor(arg0);
}
}
/**
* 重置所有title的颜色
*/
public void resetTvColor() {
tv_juntuan.setTextColor(Color.BLACK);
tv_lianmeng.setTextColor(Color.BLACK);
tv_tongshuai.setTextColor(Color.BLACK);
}
/**
* 设置当前页面的title颜色
*
* @param arg0
*/
public void setTvColor(int arg0) {
switch (arg0) {
case 0:
tv_lianmeng.setTextColor(Color.parseColor("#ee11cc"));
break;
case 1:
tv_juntuan.setTextColor(Color.parseColor("#ee11cc"));
break;
case 2:
tv_tongshuai.setTextColor(Color.parseColor("#ee11cc"));
// 模拟红色点消息提醒
BadgeView badgeView = new BadgeView(this, tv_tongshuai);
badgeView.setText("99+");
badgeView.show();
break;
}
}
}4. demo 下载
BadgeView的jar包在工程中,工程为eclipse 开发版本demo点击下载
