android使用viewpager計(jì)算偏移量實(shí)現(xiàn)選項(xiàng)卡功能
本文實(shí)例為大家分享了android實(shí)現(xiàn)選項(xiàng)卡功能,通過(guò)計(jì)算偏移量,設(shè)置tetxview和imageView的對(duì)應(yīng)值,一些color的值讀者自己去補(bǔ)充
實(shí)現(xiàn)效果圖:

(1)簡(jiǎn)單寫(xiě)一個(gè)主界面的布局activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:clipToPadding="true" android:fitsSystemWindows="true" android:background="@color/bg_color"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/bag_gray" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="36dp" android:background="@android:color/white" android:orientation="horizontal" android:weightSum="3"> <TextView android:id="@+id/tab1_tv" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:gravity="center" android:text="商品" android:textColor="@color/title_bag" android:textSize="18sp" /> <TextView android:id="@+id/tab2_tv" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:gravity="center" android:text="評(píng)價(jià)" android:textColor="@color/text_color_context" android:textSize="18sp" /> <TextView android:id="@+id/tab3_tv" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:gravity="center" android:text="詳情" android:textColor="@color/text_color_context" android:textSize="18sp" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="0.5dp" android:background="@color/text_color_context" /> <View android:id="@+id/cursor" android:layout_width="50dp" android:layout_height="2dp" android:layout_marginLeft="40dp" android:layout_marginTop="0dip" android:background="@color/title_bag" /> <android.support.v4.view.ViewPager android:id="@+id/thire_vp" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout> </LinearLayout>
(2)設(shè)置viewpager的適配器:FragmentAdapter
public class FragmentAdapter extends FragmentPagerAdapter {
private ArrayList<Fragment> list;
FragmentManager fm;
public FragmentAdapter(FragmentManager fm, ArrayList<Fragment> list){
super(fm);
this.fm = fm;
this.list = list;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
}
(3)然后設(shè)置三個(gè)fragment,因?yàn)橛腥齻€(gè)選項(xiàng)卡,所以我們新建三個(gè)fragment,分別是OneFragment、TwoFragment 、ThreeFragment ,布局的話(huà)也需要新建三個(gè),跟fragment一一對(duì)應(yīng),因?yàn)椴季诌^(guò)于簡(jiǎn)單,這里就不寫(xiě)了,簡(jiǎn)單寫(xiě)一點(diǎn)fragment的代碼吧
public class OneFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_one,null);
return view;
}
}
(4)在MainActivity中,設(shè)置fragment的適配器,設(shè)置顯示內(nèi)容,并且做viewpager的事件監(jiān)聽(tīng)
public class MainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener,View.OnClickListener{
private TextView tab1Tv;
private TextView tab2Tv;
private TextView tab3Tv;
private View cursor;
private ViewPager thirdVp;
private ArrayList<Fragment> fragmentlist;
private int offset = 0;
private int screenWidth = 0;
private int screenl_3;
private LinearLayout.LayoutParams lp;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_product);
//綁定控件
tab1Tv = (TextView)findViewById(R.id.tab1_tv);
tab2Tv = (TextView)findViewById(R.id.tab2_tv);
tab3Tv = (TextView)findViewById(R.id.tab3_tv);
cursor = (View) findViewById(R.id.cursor);
thirdVp = (ViewPager) findViewById(R.id.thire_vp);
//獲取屏幕寬度
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
screenWidth = dm.widthPixels;
screenl_3 = screenWidth/3; //裁剪3分之1
lp = (LinearLayout.LayoutParams)cursor.getLayoutParams();
fragmentlist = new ArrayList<>();
fragmentlist.add(new OneFragment());
fragmentlist.add(new TwoFragment());
fragmentlist.add(new ThreeFragment());
thirdVp.setAdapter(new FragmentAdapter(getSupportFragmentManager(),fragmentlist));
thirdVp.setCurrentItem(0);
thirdVp.setOffscreenPageLimit(2);
thirdVp.setOnPageChangeListener(this);
tab1Tv.setOnClickListener(this);
tab2Tv.setOnClickListener(this);
tab3Tv.setOnClickListener(this);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
offset = (screenl_3-cursor.getLayoutParams().width)/2;
Log.d("TAG", "111----"+position + "--" + positionOffset + "--"
+ positionOffsetPixels);
final float scale = getResources().getDisplayMetrics().density;
if (position == 0){
lp.leftMargin = (int)(positionOffsetPixels/3)+offset;
}else if(position ==1){
lp.leftMargin = (int)(positionOffsetPixels/3)+screenl_3+offset;
}
cursor.setLayoutParams(lp);
upTextcolor(position);
}
private void upTextcolor(int position){
if (position==0){
tab1Tv.setTextColor(getResources().getColor(R.color.title_bag));
tab2Tv.setTextColor(getResources().getColor(R.color.text_color_context));
tab3Tv.setTextColor(getResources().getColor(R.color.text_color_context));
}else if(position==1){
tab1Tv.setTextColor(getResources().getColor(R.color.text_color_context));
tab2Tv.setTextColor(getResources().getColor(R.color.title_bag));
tab3Tv.setTextColor(getResources().getColor(R.color.text_color_context));
}else if(position==2){
tab1Tv.setTextColor(getResources().getColor(R.color.text_color_context));
tab2Tv.setTextColor(getResources().getColor(R.color.text_color_context));
tab3Tv.setTextColor(getResources().getColor(R.color.title_bag));
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.tab1_tv:
thirdVp.setCurrentItem(0);
break;
case R.id.tab2_tv:
thirdVp.setCurrentItem(1);
break;
case R.id.tab3_tv:
thirdVp.setCurrentItem(2);
break;
}
}
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android使用RollViewPager實(shí)現(xiàn)輪播圖
- Android使用ViewPager實(shí)現(xiàn)啟動(dòng)引導(dǎo)頁(yè)效果
- Android使用ViewPager完成app引導(dǎo)頁(yè)
- Android ViewPager實(shí)現(xiàn)滑動(dòng)指示條功能
- android使用ViewPager實(shí)現(xiàn)圖片自動(dòng)切換
- Android自定義引導(dǎo)玩轉(zhuǎn)ViewPager的方法詳解
- Android使用ViewPager快速切換Fragment時(shí)卡頓的優(yōu)化方案
- Android Studio使用ViewPager+Fragment實(shí)現(xiàn)滑動(dòng)菜單Tab效果
- Android原生ViewPager控件實(shí)現(xiàn)卡片翻動(dòng)效果
- Android用viewPager2實(shí)現(xiàn)UI界面翻頁(yè)滾動(dòng)的效果
相關(guān)文章
android網(wǎng)絡(luò)編程之a(chǎn)ndroid連接網(wǎng)絡(luò)的簡(jiǎn)單示例代碼
這篇文章主要介紹了android連接網(wǎng)絡(luò)的簡(jiǎn)單示例,需要的朋友可以參考下2014-04-04
淺析Android手機(jī)衛(wèi)士之抖動(dòng)輸入框和手機(jī)震動(dòng)
這篇文章主要介紹了淺析Android手機(jī)衛(wèi)士之輸入框抖動(dòng)和手機(jī)震動(dòng)的相關(guān)資料,需要的朋友可以參考下2016-04-04
Android編程實(shí)現(xiàn)XML解析與保存的三種方法詳解
這篇文章主要介紹了Android編程實(shí)現(xiàn)XML解析與保存的三種方法,結(jié)合實(shí)例形式詳細(xì)分析了Android實(shí)現(xiàn)xml解析的SAX、DOM、PULL三種方法的相關(guān)操作技巧,需要的朋友可以參考下2017-08-08
Android HttpURLConnection下載網(wǎng)絡(luò)圖片設(shè)置系統(tǒng)壁紙
這篇文章主要為大家詳細(xì)介紹了Android HttpURLConnection下載網(wǎng)絡(luò)圖片設(shè)置系統(tǒng)壁紙,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10
淺析Android中g(shù)etWidth()和getMeasuredWidth()的區(qū)別
這篇文章主要介紹了淺析Android中g(shù)etWidth()和getMeasuredWidth()的區(qū)別 ,getMeasuredWidth()獲取的是view原始的大小,getWidth()獲取的是這個(gè)view最終顯示的大小,具體區(qū)別介紹大家參考下本文2018-04-04
adb通過(guò)wifi連接android設(shè)備流程解析
這篇文章主要介紹了adb通過(guò)wifi連接android設(shè)備流程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
Android實(shí)現(xiàn)自動(dòng)朗讀功能(TTS)
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)自動(dòng)朗讀功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08

