Android ViewPager與radiogroup實現關聯
效果圖展示

Android ViewPager與radiogroup實現關聯步驟
1.實例化ViewPager
2.通過LayoutInflater加載布局,返回View結果
3.把生成的每一個View對象添加到List集合中
4.實例化適配器,傳遞View集合
5.在適配器中繼承自PagerAdapter,實現內部的四個方法
6.實例化每個RadioButton
7.點擊每個RaidoButton時,切換不同的頁面(viewPager.setCurrentltem(下標))
8.當頁面切換后,還要把當前的導航欄變為綠色
9.當你每次點擊之前的時候,添加一個方法,清除方法,(清理之 前的所有導航欄的狀態,置為灰色)
10.實現滑動監聽需要addOnPagerChangeListener
11.在onPagerSelected方法中,根據position頁面的下標判斷分別設置對應的底部導航欄狀態
代碼演示
1.在主布局文件中引入android-support-v4.jar包并添加RadioGroup并在RadioGroup中添加RadioButton用于顯示導航欄
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.cxy.viewpager.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="9"> </android.support.v4.view.ViewPager> <RadioGroup android:id="@+id/radioGroup" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="#F4F3F3" android:orientation="horizontal"> <RadioButton android:id="@+id/radioButton1" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/mess_t" android:gravity="center" android:text="微信" android:textColor="#11CD6E"/> <RadioButton android:id="@+id/radioButton2" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/call_f" android:gravity="center" android:text="通訊錄" android:textColor="@android:color/darker_gray"/> <RadioButton android:id="@+id/radioButton3" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/show_f" android:gravity="center" android:text="發現" android:textColor="@android:color/darker_gray"/> <RadioButton android:id="@+id/radioButton4" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/my" android:gravity="center" android:text="我" android:textColor="@android:color/darker_gray"/> </RadioGroup></LinearLayout>
2.ViewPager需要適配器繼承于PagerAdapter
package com.example.cxy.viewpager.adapter;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import java.util.List;/** * date:2017/3/7 * Created:陳簫陽(admin) */public class MyViewPagerAdpter extends PagerAdapter { private List<View> mList; public MyViewPagerAdpter(List<View> list) { mList = list; } //返回視圖數量 @Override public int getCount() { return mList.size(); } //是否通過對象加載視圖 @Override public boolean isViewFromObject(View view, Object object) { return view == object; } //加載當前頁面 @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(mList.get(position)); return mList.get(position);//View } //銷毀滑出視圖 @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mList.get(position)); }}3.新建一個fragment包,在包中新建OneFragment類用于滑動展示,新建布局文件fragmentone.xml并添加TextView用于添加不同頁面的內容,共有四個這里只寫一個
OneFragment類
package com.example.cxy.viewpager.fragment;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.cxy.viewpager.R;/** * date:2017/3/7 * Created:陳簫陽(admin) */public class OneFragment extends Fragment{ @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragmentone, null); return view; }}fragmentone.xml
<?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="match_parent" android:orientation="vertical"> <TextView android:textSize="30sp" android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="match_parent" android:text="這是微信頁面"/></LinearLayout>
4.編寫主類
package com.example.cxy.viewpager;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.view.LayoutInflater;import android.view.View;import android.widget.RadioButton;import android.widget.RadioGroup;import com.example.cxy.viewpager.adapter.MyViewPagerAdpter;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener { private ViewPager mViewPager; private List<View> mList; private RadioGroup mRadioGroup; private RadioButton weChatBtn, msgBtn, showBtn, myBtn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化所有控件 initView(); } private void initView() { //實例化ViewPager mViewPager = (ViewPager) findViewById(R.id.viewPager); //實例化Radiogroup mRadioGroup = (RadioGroup) findViewById(R.id.radioGroup); //給RadioGroup添加監聽 mRadioGroup.setOnCheckedChangeListener(this); //實例化RadioButton weChatBtn = (RadioButton) findViewById(R.id.radioButton1); msgBtn = (RadioButton) findViewById(R.id.radioButton2); showBtn = (RadioButton) findViewById(R.id.radioButton3); myBtn = (RadioButton) findViewById(R.id.radioButton4); //實例化List數組 mList = new ArrayList<>(); View view1 = LayoutInflater.from(this).inflate(R.layout.fragmentone, null); View view2 = LayoutInflater.from(this).inflate(R.layout.fragmenttwo, null); View view3 = LayoutInflater.from(this).inflate(R.layout.fragmentthree, null); View view4 = LayoutInflater.from(this).inflate(R.layout.fragmentfour, null); //把生成的每一個View對象添加到集合中 mList.add(view1); mList.add(view2); mList.add(view3); mList.add(view4); //實例化適配器 MyViewPagerAdpter adapter = new MyViewPagerAdpter(mList); //給ViewPager添加適配器 mViewPager.setAdapter(adapter); //給ViewPager添加監聽事件 mViewPager.addOnPageChangeListener(this); } @Override public void onCheckedChanged(RadioGroup group, int checkedId) { //清理所有導航欄的狀態 clearState(); switch (checkedId) { case R.id.radioButton1: //給ViewPager設置當前布局 mViewPager.setCurrentItem(0); //給RadioButton設置文本顏色 weChatBtn.setTextColor(getResources().getColor(R.color.tvGreen)); //給RadioButton設置文本上方的圖片 weChatBtn.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.mess_t), null, null); break; case R.id.radioButton2: mViewPager.setCurrentItem(1); msgBtn.setTextColor(getResources().getColor(R.color.tvGreen)); msgBtn.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.call_t), null, null); break; case R.id.radioButton3: mViewPager.setCurrentItem(2); showBtn.setTextColor(getResources().getColor(R.color.tvGreen)); showBtn.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.show_t), null, null); break; case R.id.radioButton4: mViewPager.setCurrentItem(3); myBtn.setTextColor(getResources().getColor(R.color.tvGreen)); myBtn.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.my_t), null, null); break; } } //初始化底部導航欄 private void clearState() { weChatBtn.setTextColor(getResources().getColor(android.R.color.darker_gray)); msgBtn.setTextColor(getResources().getColor(android.R.color.darker_gray)); showBtn.setTextColor(getResources().getColor(android.R.color.darker_gray)); myBtn.setTextColor(getResources().getColor(android.R.color.darker_gray)); weChatBtn.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.mess_f), null, null); msgBtn.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.call_f), null, null); showBtn.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.show_f), null, null); myBtn.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.my), null, null); } //滑動過程中的動作 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //選擇某個頁面松手后會被調用 @Override public void onPageSelected(int position) { //清理所有導航欄的狀態 clearState(); switch (position) { //使用Switch拿到下標定義當滑動到相應位置小點顯示顏色 case 0: //當頁面切換后,還要把當前的導航欄變為綠色 weChatBtn.setTextColor(getResources().getColor(R.color.tvGreen)); //設置文本的上方的圖片的,四個參數分別為,左、上、右、下 weChatBtn.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.mess_t), null, null); break; case 1: msgBtn.setTextColor(getResources().getColor(R.color.tvGreen)); msgBtn.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.call_t), null, null); break; case 2: showBtn.setTextColor(getResources().getColor(R.color.tvGreen)); showBtn.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.show_t), null, null); break; case 3: myBtn.setTextColor(getResources().getColor(R.color.tvGreen)); myBtn.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.my_t), null, null); break; } } //手指放上去,松開,拖動都會被調用 @Override public void onPageScrollStateChanged(int state) { }}以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答