Android ViewPager + Fragment的布局

ViewPager And Fragment

1.之前有篇博客是讲ViewPager的用法的：http://www.cnblogs.com/liangstudyhome/p/3773156.html

2.这里用ViewPager+Fragment做个导航界面：

效果图如下：

3.对实现的思路进行一个简单的介绍：

  1. 　　上面的导航菜单里面的选项卡的总长度是超过了屏幕的，所以用了一个自定义HorizontalScrollView，在自定义HorizontalScrollView中加了两个箭头的图片根据滚动的位置来显示箭头（用的方法是onScrollChanged）
  2. 　　自定义HorizontalScrollView定义好以后，往里面添加选项卡，用的方法是忘RadioGroup里面添加没有button的RadioButton,每个RadioButton的宽度是屏幕宽度的1/4
  3. 　　然后把导航的ImageView相关参数设置好后，添加动画效果(导航ImageView的每次移动到第N个RadioButton 下面,通过该RadioButton的getleft()直接获取到移动到的距离)
  4. 　　当移动到选项卡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 stub
23     }
24 
25     public SyncHorizontalScrollView(Context context, AttributeSet attrs) {
26         super(context, attrs);
27         // TODO Auto-generated constructor stub
28     }
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 != null
55                 && 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     @Override
12     public void onActivityCreated(Bundle savedInstanceState) {
13         super.onActivityCreated(savedInstanceState);
14     }
15     
16 }
fragment_selection_launch.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 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     @Override
19     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     @Override
136     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         @Override
148         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         @Override
168         public int getCount() {
169             
170             return tabTitle.length;
171         }
172         
173     }
174 
175 }




activity_main.xml




 1 <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.SyncHorizontalScrollView
14             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             <RelativeLayout
22                 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                 <RadioGroup
29                     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                 <ImageView
38                     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         <ImageView
49             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         <ImageView
61             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.ViewPager
74         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>




源码下载：下载




 






            

            
posted @ 
2014-09-15 23:22 
perfect亮 
阅读(891) 
评论(0) 
编辑 
收藏 
举报