fragment與Viewpage實(shí)現(xiàn)滑動(dòng)切換效果
顯示效果:
實(shí)現(xiàn)過程:
1.創(chuàng)建3個(gè)選項(xiàng)卡中的內(nèi)容,即三個(gè)Fragment。
這里僅貼出其中一個(gè):
Tab2:
package com.example.viewpagerdemo3; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.Button; import android.widget.Toast; public class Tab2 extends Fragment { private Button but = null; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.tab2,null);//注意不要指定父視圖 but = (Button) view.findViewById(R.id.but); return view; } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); but.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(Tab2.this.getActivity(),"hahah", 0).show(); } }); } }
布局:
剩下兩個(gè)Fragment類似。
2.主界面布局
三個(gè)TextView代表選項(xiàng)卡標(biāo)題,ImageView代表選項(xiàng)卡下的下劃線。
3.實(shí)現(xiàn)activity。
package com.example.viewpagerdemo3; import android.graphics.BitmapFactory; import android.graphics.Color; import android.graphics.Matrix; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; import android.widget.TextView; public class MainActivity extends FragmentActivity { private ViewPager vPager = null; /** * 代表選項(xiàng)卡下的下劃線的imageview */ private ImageView cursor = null; /** * 選項(xiàng)卡下劃線長(zhǎng)度 */ private static int lineWidth = 0; /** * 偏移量 * (手機(jī)屏幕寬度/3-選項(xiàng)卡長(zhǎng)度)/2 */ private static int offset = 0; /** * 選項(xiàng)卡總數(shù) */ private static final int TAB_COUNT = 3; /** * 當(dāng)前顯示的選項(xiàng)卡位置 */ private int current_index = 0; /** * 選項(xiàng)卡標(biāo)題 */ private TextView text1,text2,text3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); vPager = (ViewPager) findViewById(R.id.vPager); initImageView(); text1 = (TextView) findViewById(R.id.text1); text2 = (TextView) findViewById(R.id.text2); text3 = (TextView) findViewById(R.id.text3); final TextView[] titles = {text1,text2,text3}; vPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public int getCount() { return TAB_COUNT; } @Override public Fragment getItem(int index)//直接創(chuàng)建fragment對(duì)象并返回 { switch (index) { case 0: return new Tab1(); case 1: return new Tab2(); case 2: return new Tab3(); } return null; } }); vPager.setOnPageChangeListener(new OnPageChangeListener() { int one = offset * 2 + lineWidth;// 頁(yè)卡1 -> 頁(yè)卡2 偏移量 @Override public void onPageSelected(int index)//設(shè)置標(biāo)題的顏sè以及下劃線的移動(dòng)效果 { Animation animation = new TranslateAnimation(one*current_index,one*index, 0,0); animation.setFillAfter(true); animation.setDuration(300); cursor.startAnimation(animation); titles[current_index].setTextColor(Color.BLACK); titles[index].setTextColor(Color.RED); current_index = index; } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int index) { } }); } private void initImageView() { cursor = (ImageView) findViewById(R.id.cursor); //獲取圖片寬度 lineWidth = BitmapFactory.decodeResource(getResources(),R.drawable.line).getWidth(); DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); //獲取屏幕寬度 int screenWidth = dm.widthPixels; Matrix matrix = new Matrix(); offset = (int) ((screenWidth/(float)TAB_COUNT - lineWidth)/2); matrix.postTranslate(offset, 0); //設(shè)置初始位置 cursor.setImageMatrix(matrix); } }
推薦文章
2025-01-18
2024-11-28
2024-11-09
2024-10-25
2024-06-25
2024-01-04
2023-11-06
2023-10-30
2023-10-13
2023-10-10
穩(wěn)定
產(chǎn)品高可用性高并發(fā)貼心
項(xiàng)目群及時(shí)溝通專業(yè)
產(chǎn)品經(jīng)理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽(yù)堅(jiān)持
10年專注高端品質(zhì)開發(fā)聯(lián)系我們
友情鏈接: