前言:对一个Android
应用来说,界面布局是非常重要的,但是现在的一些资料都没有对布局的系统的整理,一些博客写的东西也太零散,所以我就整理了一下这些界面的用法。如果有不对的地方请读者们指出,我一定及时改正。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.tzy.layoutdemo.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="300dp"/>
</LinearLayout>
LayoutInflater inflater = getLayoutInflater();
view1 = inflater.inflate(R.layout.view_01,null);
view2 = inflater.inflate(R.layout.view_02,null);
view3 = inflater.inflate(R.layout.view_03,null);
mViewList = new ArrayList<>();
mViewList.add(view1);
mViewList.add(view2);
mViewList.add(view3);
这里需要重写的方法如下:
选择性重写的方法:getPageTitle() 方法可以通过position设置标题
PagerAdapter pagerAdapter = new PagerAdapter() {
//返回当前有效视图的个数
@Override public int getCount() {
return mViewList.size();
}
/*功能:该函数用来判断instantiateItem(ViewGroup, int)函数所返回来的Key 与一个页面视图是否是代表的同一个视图(即它俩是否是对应的,对应的表示同一个View)*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mViewList.get(position));
//将当前页面本身的View作为key 也可以是代表当前页面的任意值,比如position
return mViewList.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViewList.get(position));
}
};
mViewPager.setAdapter(pagerAdapter);
效果图是仿原版微信的一个界面
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#eee" tools:context=".ui.activity.MainActivity" android:orientation="vertical">
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">
//这里可以直接用TextView来实现
<LinearLayout android:id="@+id/id_tab1_chat" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:gravity="center" android:padding="10dp">
<TextView android:id="@+id/id_chat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="聊天" android:textColor="@color/colorPrimary" android:textSize="15sp"/>
</LinearLayout>
<LinearLayout android:id="@+id/id_tab1_find" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:padding="10dp" android:gravity="center">
<TextView android:id="@+id/id_find" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="发现" android:textSize="15sp"/>
</LinearLayout>
<LinearLayout android:id="@+id/id_tab1_contact" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:padding="10dp" android:gravity="center">
<TextView android:id="@+id/id_contact" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通讯录" android:textSize="15sp"/>
</LinearLayout>
</LinearLayout>
<!--这个ImageView是蓝色指示器,宽度会在代码里面重新设定为屏幕的 1/3,高度我这里设置的是2dp,你也可以自行设定高度 -->
<ImageView android:id="@+id/id_tab_line" android:layout_width="100dp" android:layout_height="2dp" android:background="@color/colorPrimary"/>
<android.support.v4.view.ViewPager android:id="@+id/id_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/>
</LinearLayout>
在Fragment个数较少的时候选用FragmentPagerAdapter 个数较多时选用FragmentStatePagerAdapter
注:导入的时候最好都是的v4包的Fragment
相关文章:Android– FragmentStatePagerAdapter分页
需要重写的方法:
getCount 返回Fragment的数量
private List<Fragment> fragmentList;
public FragmentAdapter(FragmentManager fm,List<Fragment> fragmentList) {
super(fm);
this.fragmentList = fragmentList;
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
private void initTabLine() {
DisplayMetrics outMetrics = new DisplayMetrics();
getWindow().getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
screenWidth = outMetrics.widthPixels;
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLine.getLayoutParams();
lp.width = screenWidth/3;
mTabLine.setLayoutParams(lp);
}
List<Fragment> fragments = new ArrayList<>();
fragments.add(new ChatFragment());
fragments.add(new FindFragment());
fragments.add(new ContactFragment());
public class TabOnPageChangeListener implements ViewPager.OnPageChangeListener {
/** * @param position 当前被展示的页面的index * @param positionOffset 相对于这个position的offset,值的范围[0, 1) * @param positionOffsetPixels positionOffset的像素值 */
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
/*动态设置View的LayoutParams实现ImageView的滑动,由于positionOffset只是一个[0,1) 相当于比例,需要乘以屏幕宽度的1/3 例如: 滑到屏幕第一个位置的1/2处,假设屏幕宽度1/3为2 那么positionOffset为0.5 而且是相对于当前position的offset 得到的结果应该为(0.5+0)*2=1 刚好leftMargin为1 */
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLine.getLayoutParams();
lp.leftMargin = (int) ((positionOffset + position) * screenWidth / 3);
mTabLine.setLayoutParams(lp);
}
/*设置选择TextView的时候改变颜色,必须reset颜色一次 否则会造成颜色改变之后,无法变回原来的颜色*/
@Override
public void onPageSelected(int position) {
resetTextView();
switch (position) {
case 0:
chat.setTextColor(res.getColor(R.color.colorPrimary));
break;
case 1:
find.setTextColor(res.getColor(R.color.colorPrimary));
break;
case 2:
contact.setTextColor(res.getColor(R.color.colorPrimary));
break;
}
}
private void resetTextView() {
chat.setTextColor(res.getColor(R.color.black));
find.setTextColor(res.getColor(R.color.black));
contact.setTextColor(res.getColor(R.color.black));
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
注:v4包的Fragment是getSupportFragmentManager()而不是getFragmentManager()
mAdapter=newFragmentAdapter(getSupportFragmentManager(), fragments);
mViewPager.setAdapter(mAdapter);
mViewPager.addOnPageChangeListener(new TabOnPageChangeListener());
效果实现和第二点一样的界面
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eeeeee"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="@+id/course_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="@+id/tab_course_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorPrimary"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/tab_course_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
2.TabLayout和ViewPager双向绑定
mAdapter = new FragmentAdapter(getSupportFragmentManager(), fragmentList);
pager.setAdapter(mAdapter);
//ViewPager和TabLayout绑定
pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
//TabLayout和ViewPager绑定
tabLayout.setupWithViewPager(pager);