android開發(fā)之高仿微信6.0+滑動Tab逐漸變色

一自定義WeiXinTabChangeView

? ? ? ? ? ? 1 自定義屬性attrs.xml：

? ?<?xml version="1.0" encoding="utf-8"?>

? <resources>

<declare-styleable name="WinXinTabView">

</declare-styleable>

</resources>

? 2 自定義 WeiXinTabChangeView類

? ? ? ? ? public classWeiXinTabChangeViewextendsRelativeLayout {

privateContextmContext;

private booleanisChecked;//tab是否被選中

privateStringtable_title;//tab的標題

private? floattabTitleSize;//標題的字體大小

private? inttabTitleColor;//字體的顏色

//標題

privateTextViewtitle_one;

//二層標題

privateTextViewtitle_two;

//圖標

privateDrawabletabIcon;

privateImageViewimageview_one;

//二層圖標

privateDrawabletabIcon_two;

privateImageViewimageview_two;

//透明度

private floatmAlpha=1f;

private inttitleNolColor= Color.GRAY;

publicWeiXinTabChangeView(Context context) {

super(context);

}

publicWeiXinTabChangeView(Context context,AttributeSet attrs) {

super(context,attrs);

TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.WinXinTabView);//獲取TypedArray從而獲取屬性

isChecked= typedArray.getBoolean(R.styleable.WinXinTabView_tabChecked, false);

table_title= typedArray.getString(R.styleable.WinXinTabView_tabTitle);

tabTitleSize= typedArray.getDimension(R.styleable.WinXinTabView_tabTitleSize,20);

tabTitleColor= typedArray.getColor(R.styleable.WinXinTabView_tabTitleColor,Color.GRAY);

tabIcon= typedArray.getDrawable(R.styleable.WinXinTabView_tabIcon);

tabIcon_two= typedArray.getDrawable(R.styleable.WinXinTabView_tabIconOver);

typedArray.recycle();

mContext= context;

initView();

}

publicWeiXinTabChangeView(Context context,AttributeSet attrs, intdefStyleAttr) {

super(context,attrs,defStyleAttr);

}

//初始化控件

private voidinitView() {

RelativeLayout.LayoutParams titleLayoutParams =newRelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);

titleLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);//父容器底部

titleLayoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL,RelativeLayout.TRUE);

//二層標題

title_two=newTextView(mContext);

title_two.setId(R.id.title_two);//設(shè)置id

title_two.setLayoutParams(titleLayoutParams);

this.addView(title_two);//二層標題添加到控件中

//標題

title_one=newTextView(mContext);

title_one.setId(R.id.title_one);

title_one.setLayoutParams(titleLayoutParams);

this.addView(title_one);

//圖標的layoutparams

RelativeLayout.LayoutParams iconLayoutParams =newRelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);

iconLayoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL,RelativeLayout.TRUE);

iconLayoutParams.addRule(RelativeLayout.ABOVE,R.id.title_one);

//二層圖標

imageview_two=newImageView(mContext);

imageview_two.setId(R.id.image_two);

imageview_two.setLayoutParams(iconLayoutParams);

this.addView(imageview_two);

//圖標

imageview_one=newImageView(mContext);

imageview_one.setId(R.id.image_one);

imageview_one.setLayoutParams(iconLayoutParams);

this.addView(imageview_one);

//設(shè)置數(shù)據(jù)并刷新

refreshData();

}

private voidrefreshData() {

mAlpha=1;

setTitleOne();

setTitleTwo();

setIconOne();

setIconTwo();

}

//設(shè)置二層圖標

private voidsetIconTwo() {

imageview_two.setImageDrawable(tabIcon_two);

if(isChecked){

imageview_two.setAlpha(mAlpha);

}else{

imageview_two.setAlpha(1-mAlpha);

}

//設(shè)置一層圖標

private voidsetIconOne() {

imageview_one.setImageDrawable(tabIcon);

if(isChecked){

imageview_one.setAlpha(1-mAlpha);

}else{

imageview_one.setAlpha(mAlpha);

}

//設(shè)置二層標題

private voidsetTitleTwo() {

title_two.setText(table_title);

title_two.setTextColor(tabTitleColor);

if(isChecked){

title_two.setAlpha(mAlpha);

}else{

title_two.setAlpha(1-mAlpha);

}

//設(shè)置標題的

private voidsetTitleOne() {

title_one.setText(table_title);

title_one.setTextColor(titleNolColor);

if(isChecked){

title_one.setAlpha(1-mAlpha);

}else{

title_one.setAlpha(mAlpha);

}

/**

*設(shè)置選中狀態(tài)

* */

public voidsetChecked(booleanisChecked) {

this.isChecked= isChecked;

setCheckedData();

}

/**

*選中之后重新設(shè)置數(shù)據(jù)

* */

private voidsetCheckedData(){

refreshData();

}

/**

*滑動時改變顏色

* */

public voidonScrolling(floatalpha){

mAlpha= alpha;

onScrollSetData();

}

/**

*滑動時設(shè)置圖標透明度以及文字透明度

* */

private voidonScrollSetData(){

//設(shè)置圖標透明度

imageview_one.setAlpha(1-mAlpha);

imageview_two.setAlpha(mAlpha);

//設(shè)置標題透明度

title_one.setAlpha(1-mAlpha);

title_two.setAlpha(mAlpha);

}

publicStringgetTitleText() {

returntable_title;

}

public voidsetTitleText(String titleText) {

this.table_title= titleText;

}

publicDrawablegetTabIcon() {

returntabIcon;

}

public voidsetTabIcon(Drawable tabIcon) {

this.tabIcon= tabIcon;

}

public booleanisChecked() {

returnisChecked;

}

publicImageViewgetIconImageView() {

returnimageview_one;

}

二自定義一個 viewGroup 來存放 WeiXinTabChangeView

public classTabGroupViewextendsLinearLayout {

privateArrayListtabViewList;

privateWeiXinTabVieOnItemClickweiXinTabVieOnItemClick;

publicTabGroupView(Context context) {

this(context,null);

}

publicTabGroupView(Context context,AttributeSet attrs) {

super(context,attrs);

tabViewList=newArrayList();

//設(shè)置默認的水平布局

this.setOrientation(HORIZONTAL);

}

/**

*選中某一個

* */

public voidsetCurrentItem(intitem){

changeItem();

WeiXinTabChangeView weiXinTab =tabViewList.get(item);

weiXinTab.setChecked(true);

}

/**

*清除選中狀態(tài)

* */

private voidchangeItem(){

for(WeiXinTabChangeView weiXinTab :tabViewList){

weiXinTab.setChecked(false);

}

/**

*@paramposition當前界面索引

*@parampositionOffset滑動的百分比

* */

public voidonPageScrolling(intposition, floatpositionOffset) {

if(positionOffset>0){

WeiXinTabChangeView weiXinTab =tabViewList.get(position);

weiXinTab.onScrolling(1-positionOffset);

if(position+1

WeiXinTabChangeView nextweiXinTab =tabViewList.get(position+1);

nextweiXinTab.onScrolling(positionOffset);

}

/**

*點擊事件

* */

public interfaceWeiXinTabVieOnItemClick{

voidonClick(intposition,WeiXinTabChangeView tabLayout);

}

/**

*設(shè)置每個Item的監(jiān)聽事件

* */

public voidsetOnItemClickListener(WeiXinTabVieOnItemClick weiXinTabVieOnItemClick) {

this.weiXinTabVieOnItemClick= weiXinTabVieOnItemClick;

initListener();

}

/**

*設(shè)置監(jiān)聽器

* */

private voidinitListener(){

intcount =this.getChildCount();

for(inti=0;i

finalWeiXinTabChangeView weiXinTab = (WeiXinTabChangeView)this.getChildAt(i);

tabViewList.add(weiXinTab);

final intfinalI = i;

weiXinTab.setOnClickListener(newOnClickListener() {

@Override

public voidonClick(View v) {

changeItem();//清除選中狀態(tài)

weiXinTab.setChecked(true);

if(weiXinTabVieOnItemClick!=null){

weiXinTabVieOnItemClick.onClick(finalI,weiXinTab);

}

});

}

/**

*設(shè)置只能水平布局

* */

@Override

public voidsetOrientation(intorientation) {

super.setOrientation(HORIZONTAL);

}

三使用方法 ?

1 布局中的使用方式

<?xml version="1.0"encoding="utf-8"?>

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:lishuai="http://schemas.android.com/apk/res-auto"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.example.lishuai.copyweixinhomedemo.ui.MainActivity">

<com.example.lishuai.copyweixinhomedemo.view.TabGroupView

android:id="@+id/tgv_weixingroup"

android:layout_alignParentBottom="true"

android:layout_width="match_parent"

android:layout_height="55dp"

android:paddingBottom="5dp"

android:paddingTop="5dp"

<com.example.lishuai.copyweixinhomedemo.view.WeiXinTabChangeView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/tab_main"

android:layout_weight="1"

lishuai:tabTitle="微信"

lishuai:tabTitleColor="#FBA615"

lishuai:tabIcon="@mipmap/tab_1_false"

lishuai:tabIconOver="@mipmap/tab_1_true"

lishuai:tabChecked="true"/>

<com.example.lishuai.copyweixinhomedemo.view.WeiXinTabChangeView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1"

lishuai:tabTitle="微信"

lishuai:tabTitleColor="#FBA615"

lishuai:tabIcon="@mipmap/tab_1_false"

lishuai:tabIconOver="@mipmap/tab_1_true"

<com.example.lishuai.copyweixinhomedemo.view.WeiXinTabChangeView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1"

lishuai:tabTitle="微信"

lishuai:tabTitleColor="#FBA615"

lishuai:tabIcon="@mipmap/tab_1_false"

lishuai:tabIconOver="@mipmap/tab_1_true"

<com.example.lishuai.copyweixinhomedemo.view.WeiXinTabChangeView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1"

lishuai:tabTitle="微信"

lishuai:tabTitleColor="#FBA615"

lishuai:tabIcon="@mipmap/tab_1_false"

lishuai:tabIconOver="@mipmap/tab_1_true"

</com.example.lishuai.copyweixinhomedemo.view.TabGroupView>

<android.support.v4.view.ViewPager

android:id="@+id/viewpager"

android:layout_above="@id/tgv_weixingroup"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

</RelativeLayout>

2代碼中使用

public classMainActivityextendsAppCompatActivity {

privateTabGroupViewtabGroupView;

privateViewPagerviewpager;

private? ? intmPosition=0;

@Override

protected voidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initView();

}

private voidinitView() {

tabGroupView= (TabGroupView) findViewById(R.id.tgv_weixingroup);

viewpager= (ViewPager) findViewById(R.id.viewpager);

tabGroupView.setOnItemClickListener(newTabGroupView.WeiXinTabVieOnItemClick() {

@Override

public voidonClick(intposition,WeiXinTabChangeView tabLayout) {

Log.i("dfdf","選中的tablayout="+ position);

viewpager.setCurrentItem(position,false);

}

});

viewpager.setAdapter(newMainPagerAdapter(getSupportFragmentManager()));

viewpager.addOnPageChangeListener(newViewPager.OnPageChangeListener() {

@Override

public voidonPageScrolled(intposition, floatpositionOffset, intpositionOffsetPixels) {

tabGroupView.onPageScrolling(position,positionOffset);

}

@Override

public voidonPageSelected(intposition) {

mPosition= position;

tabGroupView.setCurrentItem(position);

}

@Override

public voidonPageScrollStateChanged(intstate) {

}

});

}

3 MainPagerAdapter

public classMainPagerAdapterextendsFragmentPagerAdapter {

publicMainPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

publicFragmentgetItem(intposition) {

returnFragmentFactory.create(position);

}

@Override

public intgetCount() {

return4;

}

4 FragmentFactory

public classFragmentFactory {

public? staticFragmentcreate(intposition){

Fragment fragment =null;

switch(position) {

case0:

fragment =newWeiXinFragment();

break;

case1:

fragment =newTongXunLuFragment();

break;

case2:

fragment =newFindFragment();

break;

case3:

fragment =newMeFragment();

break;

}

returnfragment;

}

5 Fragment

public classWeiXinFragmentextendsFragment {

@Nullable

@Override

publicViewonCreateView(LayoutInflater inflater,@NullableViewGroup container,@NullableBundle savedInstanceState) {

TextView textView =newTextView(getActivity());

textView.setText(getClass().getSimpleName());

returntextView;

}

最后編輯于：2017.12.05 01:23:35

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末农曲，一起剝皮案震驚了整個濱河市驻债，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌暮的，老刑警劉巖冻辩，帶你破解...
沈念sama閱讀 216,372評論 6贊 498
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異倘感，居然都是意外死亡老玛，警方通過查閱死者的電腦和手機蜡豹，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,368評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門镜廉，熙熙樓的掌柜王于貴愁眉苦臉地迎上來娇唯，“玉大人凤巨，你說我怎么就攤上這事洛搀×裘溃” “怎么了谎砾？”我有些...
開封第一講書人閱讀 162,415評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵景图，是天一觀的道長。經(jīng)常有香客問我亮蒋，道長慎玖，這世上最難降的妖魔是什么笛粘？我笑而不...
開封第一講書人閱讀 58,157評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮关斜，結(jié)果婚禮上任连，老公的妹妹穿的比我還像新娘。我一直安慰自己裁着，他們只是感情好二驰，可當我...
茶點故事閱讀 67,171評論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布桶雀。她就那樣靜靜地躺著矗积，像睡著了一般敞咧。火紅的嫁衣襯著肌膚如雪休建。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,125評論 1贊 297
城市分裂傳說
那天，我揣著相機與錄音砌些，去河邊找鬼。笑死仑荐，一個胖子當著我的面吹牛释漆，可吹牛的內(nèi)容都是我干的男图。我是一名探鬼主播，決...
沈念sama閱讀 40,028評論 3贊 417
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼难裆！你這毒婦竟也來了乃戈？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 38,887評論 0贊 274
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎匪蝙，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體逛球，經(jīng)...
沈念sama閱讀 45,310評論 1贊 310
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,533評論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年屋厘，在試婚紗的時候發(fā)現(xiàn)自己被綠了月而。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片父款。...
茶點故事閱讀 39,690評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡憨攒，死狀恐怖肝集，靈堂內(nèi)的尸體忽然破棺而出杏瞻，到底是詐尸還是另有隱情，我是刑警寧澤浮创，帶...
沈念sama閱讀 35,411評論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站垦沉，受9級特大地震影響乡话，放射性物質(zhì)發(fā)生泄漏绑青。R本人自食惡果不足惜闸婴，卻給世界環(huán)境...
茶點故事閱讀 41,004評論 3贊 325
男人毒藥：我在死后第九天來索命
文/蒙蒙一邪乍、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧否纬，春花似錦、人聲如沸睛驳。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,659評論 0贊 22
一樁弒父案蹬跃，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽蝶缀。三九已至扼劈，卻和暖如春荐吵，著一層夾襖步出監(jiān)牢的瞬間骑冗，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,812評論 1贊 268
情欲美人皮
我被黑心中介騙來泰國打工先煎，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留贼涩，地道東北人。一個月前我還...
沈念sama閱讀 47,693評論 2贊 368
代替公主和親
正文我出身青樓薯蝎，卻偏偏與公主長得像遥倦，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子占锯，可洞房花燭夜當晚...
茶點故事閱讀 44,577評論 2贊 353

android開發(fā)之高仿微信6.0+滑動Tab逐漸變色

推薦閱讀更多精彩內(nèi)容