首页 > 代码库 > Android ViewPager + Fragment的布局
Android ViewPager + Fragment的布局
ViewPager And Fragment
1.之前有篇博客是讲ViewPager的用法的：http://www.cnblogs.com/liangstudyhome/p/3773156.html
2.这里用ViewPager+Fragment做个导航界面：
效果图如下：
3.对实现的思路进行一个简单的介绍：
- 上面的导航菜单里面的选项卡的总长度是超过了屏幕的，所以用了一个自定义HorizontalScrollView，在自定义HorizontalScrollView中加了两个箭头的图片根据滚动的位置来显示箭头（用的方法是onScrollChanged）
- 自定义HorizontalScrollView定义好以后，往里面添加选项卡，用的方法是忘RadioGroup里面添加没有button的RadioButton,每个RadioButton的宽度是屏幕宽度的1/4
- 然后把导航的ImageView相关参数设置好后，添加动画效果(导航ImageView的每次移动到第N个RadioButton 下面,通过该RadioButton的getleft()直接获取到移动到的距离)
- 当移动到选项卡4的时候要将自定义的HorizontalScrollView也要跟随滑动(滑动的时候用的函数smoothScrollTo，用ScrollTo没有效果的)，移动的距离就是一个RadioButton的宽度
4.相关代码：
自定义HorizontalScrollView：
1 public class SyncHorizontalScrollView extends HorizontalScrollView { 2 3 private View view; 4 private ImageView leftImage; 5 private ImageView rightImage; 6 private int windowWitdh = 0; 7 private Activity mContext; 8 9 public void setSomeParam(View view, ImageView leftImage,10 ImageView rightImage, Activity context) {11 this.mContext = context;12 this.view = view;13 this.leftImage = leftImage;14 this.rightImage = rightImage;15 DisplayMetrics dm = new DisplayMetrics();16 this.mContext.getWindowManager().getDefaultDisplay().getMetrics(dm);17 windowWitdh = dm.widthPixels;18 }19 20 public SyncHorizontalScrollView(Context context) {21 super(context);22 // TODO Auto-generated constructor stub23 }24 25 public SyncHorizontalScrollView(Context context, AttributeSet attrs) {26 super(context, attrs);27 // TODO Auto-generated constructor stub28 }29 30 // 显示和隐藏左右两边的箭头31 // public void showAndHideArrow() {32 // if (!mContext.isFinishing() && view != null) {33 // this.measure(0, 0);34 // if (windowWitdh >= this.getMeasuredWidth()) {35 // leftImage.setVisibility(View.GONE);36 // rightImage.setVisibility(View.GONE);37 // } else {38 // if (this.getLeft() == 0) {39 // leftImage.setVisibility(View.GONE);40 // rightImage.setVisibility(View.VISIBLE);41 // } else if (this.getRight() == 0) {42 // leftImage.setVisibility(View.VISIBLE);43 // rightImage.setVisibility(View.GONE);44 // } else {45 // leftImage.setVisibility(View.VISIBLE);46 // rightImage.setVisibility(View.VISIBLE);47 // }48 // }49 // }50 // }51 52 protected void onScrollChanged(int l, int t, int oldl, int oldt) {53 super.onScrollChanged(l, t, oldl, oldt);54 if (!mContext.isFinishing() && view != null && rightImage != null55 && leftImage != null) {56 if (view.getWidth() <= windowWitdh) {57 leftImage.setVisibility(View.GONE);58 rightImage.setVisibility(View.GONE);59 } else {60 if (l == 0) {61 leftImage.setVisibility(View.GONE);62 rightImage.setVisibility(View.VISIBLE);63 } else if (view.getWidth() - l == windowWitdh) {64 leftImage.setVisibility(View.VISIBLE);65 rightImage.setVisibility(View.GONE);66 } else {67 leftImage.setVisibility(View.VISIBLE);68 rightImage.setVisibility(View.VISIBLE);69 }70 }71 }72 }73 }
LaunchUIFragment：
1 public class LaunchUIFragment extends Fragment { 2 3 @Override 4 public View onCreateView(LayoutInflater inflater, ViewGroup container, 5 Bundle savedInstanceState) { 6 7 View rootView = inflater.inflate(R.layout.fragment_selection_launch, container, false); 8 9 return rootView;10 }11 @Override12 public void onActivityCreated(Bundle savedInstanceState) {13 super.onActivityCreated(savedInstanceState);14 }15 16 }
fragment_selection_launch.xml1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TextView android:id="@+id/tv_intro" 8 android:layout_width="300dp" 9 android:layout_height="wrap_content"10 android:layout_marginTop="20dp"11 android:layout_marginBottom="16dp"12 android:text="@string/launch_intro"/>13 14 <Button android:id="@+id/bt_click"15 android:layout_width="300dp"16 android:layout_height="wrap_content"17 android:layout_marginBottom="16dp"18 android:text="@string/launch_click_me"/>19 20 </LinearLayout>
CommonUIFragment：
1 public class CommonUIFragment extends Fragment { 2 3 @SuppressLint("NewApi") 4 @Override 5 public View onCreateView(LayoutInflater inflater, ViewGroup container, 6 Bundle savedInstanceState) { 7 8 View rootView = inflater.inflate(R.layout.fragment_selection_common, container, false); 9 10 TextView tv_tabName = (TextView) rootView.findViewById(R.id.tv_tabName);11 12 Bundle bundle = getArguments();13 14 tv_tabName.setText(bundle.getString(MainActivity.ARGUMENTS_NAME, ""));15 16 return rootView;17 }18 @Override19 public void onActivityCreated(Bundle savedInstanceState) {20 super.onActivityCreated(savedInstanceState);21 }22 23 }
fragment_selection_common.xml:
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TextView 8 android:layout_width="300dp" 9 android:layout_height="wrap_content"10 android:textSize="18sp"11 android:text="@string/common_intro"12 />13 14 <TextView 15 android:id="@+id/tv_tabName"16 android:layout_marginTop="30dp"17 android:layout_width="wrap_content"18 android:layout_height="30dp"19 android:layout_gravity="center"20 android:textSize="20sp"21 />22 23 </LinearLayout>
rb_blue_bg.xml
1 <?xml version="1.0" encoding="UTF-8"?>2 <selector xmlns:android="http://schemas.android.com/apk/res/android">3 4 <item android:state_checked="true" android:color="#5AB0EB"/>5 <item android:state_checked="false" android:color="#000000"/>6 7 </selector>
MainActivity.xml:
1 public class MainActivity extends FragmentActivity { 2 3 public static final String ARGUMENTS_NAME = "arg"; 4 private RelativeLayout rl_nav; 5 private SyncHorizontalScrollView mHsv; 6 private RadioGroup rg_nav_content; 7 private ImageView iv_nav_indicator; 8 private ImageView iv_nav_left; 9 private ImageView iv_nav_right; 10 private ViewPager mViewPager; 11 private int indicatorWidth; 12 public static String[] tabTitle = { "选项1", "选项2", "选项3", "选项4", "选项5" }; //标题 13 private LayoutInflater mInflater; 14 private TabFragmentPagerAdapter mAdapter; 15 private int currentIndicatorLeft = 0; 16 17 @Override 18 protected void onCreate(Bundle savedInstanceState) { 19 super.onCreate(savedInstanceState); 20 setContentView(R.layout.activity_main); 21 22 findViewById(); 23 initView(); 24 setListener(); 25 } 26 27 private void setListener() { 28 29 mViewPager.setOnPageChangeListener(new OnPageChangeListener() { 30 31 @Override 32 public void onPageSelected(int position) { 33 34 if(rg_nav_content!=null && rg_nav_content.getChildCount()>position){ 35 ((RadioButton)rg_nav_content.getChildAt(position)).performClick(); 36 } 37 } 38 39 @Override 40 public void onPageScrolled(int arg0, float arg1, int arg2) { 41 42 } 43 44 @Override 45 public void onPageScrollStateChanged(int arg0) { 46 47 } 48 }); 49 50 rg_nav_content.setOnCheckedChangeListener(new OnCheckedChangeListener() { 51 52 @Override 53 public void onCheckedChanged(RadioGroup group, int checkedId) { 54 55 if(rg_nav_content.getChildAt(checkedId)!=null){ 56 57 TranslateAnimation animation = new TranslateAnimation( 58 currentIndicatorLeft , 59 ((RadioButton) rg_nav_content.getChildAt(checkedId)).getLeft(), 0f, 0f); 60 animation.setInterpolator(new LinearInterpolator()); 61 animation.setDuration(100); 62 animation.setFillAfter(true); 63 64 //执行位移动画 65 iv_nav_indicator.startAnimation(animation); 66 67 mViewPager.setCurrentItem(checkedId); //ViewPager 跟随一起 切换 68 69 //记录当前 下标的距最左侧的 距离 70 currentIndicatorLeft = ((RadioButton) rg_nav_content.getChildAt(checkedId)).getLeft(); 71 72 mHsv.smoothScrollTo( 73 (checkedId > 1 ? ((RadioButton) rg_nav_content.getChildAt(checkedId)).getLeft() : 0) - ((RadioButton) rg_nav_content.getChildAt(2)).getLeft(), 0); 74 } 75 } 76 }); 77 } 78 79 private void initView() { 80 81 DisplayMetrics dm = new DisplayMetrics(); 82 getWindowManager().getDefaultDisplay().getMetrics(dm); 83 84 indicatorWidth = dm.widthPixels / 4; 85 86 LayoutParams cursor_Params = iv_nav_indicator.getLayoutParams(); 87 cursor_Params.width = indicatorWidth;// 初始化滑动下标的宽 88 iv_nav_indicator.setLayoutParams(cursor_Params); 89 mHsv.setSomeParam(rl_nav, iv_nav_left, iv_nav_right, this); 90 91 //获取布局填充器 92 mInflater = (LayoutInflater)this.getSystemService(LAYOUT_INFLATER_SERVICE); 93 94 //另一种方式获取 95 // LayoutInflater mInflater = LayoutInflater.from(this); 96 97 initNavigationHSV(); 98 99 mAdapter = new TabFragmentPagerAdapter(getSupportFragmentManager());100 mViewPager.setAdapter(mAdapter);101 }102 103 private void initNavigationHSV() {104 105 rg_nav_content.removeAllViews();106 107 for(int i=0;i<tabTitle.length;i++){108 109 RadioButton rb = (RadioButton) mInflater.inflate(R.layout.nav_radiogroup_item, null);110 rb.setId(i);111 rb.setText(tabTitle[i]);112 rb.setLayoutParams(new LayoutParams(indicatorWidth,113 LayoutParams.MATCH_PARENT));114 115 rg_nav_content.addView(rb);116 }117 118 }119 120 private void findViewById() {121 122 rl_nav = (RelativeLayout) findViewById(R.id.rl_nav);123 124 mHsv = (SyncHorizontalScrollView) findViewById(R.id.mHsv);125 126 rg_nav_content = (RadioGroup) findViewById(R.id.rg_nav_content);127 128 iv_nav_indicator = (ImageView) findViewById(R.id.iv_nav_indicator);129 iv_nav_left = (ImageView) findViewById(R.id.iv_nav_left);130 iv_nav_right = (ImageView) findViewById(R.id.iv_nav_right);131 132 mViewPager = (ViewPager) findViewById(R.id.mViewPager);133 }134 135 @Override136 public boolean onCreateOptionsMenu(Menu menu) {137 getMenuInflater().inflate(R.menu.main, menu);138 return true;139 }140 141 public static class TabFragmentPagerAdapter extends FragmentPagerAdapter{142 143 public TabFragmentPagerAdapter(FragmentManager fm) {144 super(fm);145 }146 147 @Override148 public Fragment getItem(int arg0) {149 Fragment ft = null;150 switch (arg0) {151 case 0:152 ft = new LaunchUIFragment();153 break;154 155 default:156 ft = new CommonUIFragment();157 158 Bundle args = new Bundle();159 args.putString(ARGUMENTS_NAME, tabTitle[arg0]);160 ft.setArguments(args);161 162 break;163 }164 return ft;165 }166 167 @Override168 public int getCount() {169 170 return tabTitle.length;171 }172 173 }174 175 }
activity_main.xml1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 tools:context=".MainActivity" > 6 7 <RelativeLayout 8 android:id="@+id/rl_tab" 9 android:layout_width="fill_parent"10 android:layout_height="wrap_content"11 android:background="#F2F2F2" >12 13 <com.example.playtabtest.view.SyncHorizontalScrollView14 android:id="@+id/mHsv"15 android:layout_width="fill_parent"16 android:layout_height="40dip"17 android:fadingEdge="none"18 android:scrollbars="none"19 >20 21 <RelativeLayout22 android:id="@+id/rl_nav"23 android:layout_width="fill_parent"24 android:layout_height="wrap_content"25 android:layout_gravity="top"26 android:background="#5AB0EB" >27 28 <RadioGroup29 android:id="@+id/rg_nav_content"30 android:layout_width="fill_parent"31 android:layout_height="38dip"32 android:layout_alignParentTop="true"33 android:background="#F2F2F2"34 android:orientation="horizontal" >35 </RadioGroup>36 37 <ImageView38 android:id="@+id/iv_nav_indicator"39 android:layout_width="1dip"40 android:layout_height="5dip"41 android:layout_alignParentBottom="true"42 android:background="#5AB0EB"43 android:contentDescription="@string/nav_desc"44 android:scaleType="matrix" />45 </RelativeLayout>46 </com.example.playtabtest.view.SyncHorizontalScrollView>47 48 <ImageView49 android:id="@+id/iv_nav_left"50 android:layout_width="wrap_content"51 android:layout_height="wrap_content"52 android:layout_alignParentLeft="true"53 android:layout_centerVertical="true"54 android:contentDescription="@string/nav_desc"55 android:paddingBottom="1dip"56 android:src="@drawable/iv_navagation_scroll_left"57 android:visibility="gone" >58 </ImageView>59 60 <ImageView61 android:id="@+id/iv_nav_right"62 android:layout_width="wrap_content"63 android:layout_height="wrap_content"64 android:layout_alignParentRight="true"65 android:layout_centerVertical="true"66 android:contentDescription="@string/nav_desc"67 android:paddingBottom="1dip"68 android:src="@drawable/iv_navagation_scroll_right"69 android:visibility="visible" >70 </ImageView>71 </RelativeLayout>72 73 <android.support.v4.view.ViewPager74 android:id="@+id/mViewPager"75 android:layout_width="wrap_content"76 android:layout_height="wrap_content"77 android:layout_alignParentBottom="true"78 android:layout_below="@id/rl_tab"79 android:layout_gravity="center"80 android:background="#ffffff"81 android:flipInterval="30"82 android:persistentDrawingCache="animation" />83 84 </RelativeLayout>
源码下载：下载
Android ViewPager + Fragment的布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。