标签:des android style blog http color io os ar
ViewPager And Fragment
1.之前有篇博客是讲ViewPager的用法的:http://www.cnblogs.com/liangstudyhome/p/3773156.html
2.这里用ViewPager+Fragment做个导航界面:
效果图如下:
3.对实现的思路进行一个简单的介绍:
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>
源码下载:下载
Android ViewPager + Fragment的布局
标签:des android style blog http color io os ar
原文地址:http://www.cnblogs.com/liangstudyhome/p/3973985.html