fragmentPagerAdapter碎片适配器的使用,可以滚动的标题栏
功能:模拟QQ浏览器的标题头,可以滑动,代码如下:
知识点:fragmentPagerAdapter的使用,注意ViewPager和Fragment都必须为v4下的包,否则会出错
关键点:
1.通过xml文件来控制textView的字体颜色
2.对标题栏划出屏幕的处理
动态创建标题头的方法
LayoutParams params=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);//包裹内容 params.rightMargin=15;//右边距 //动态添加textview时参数的设置 ColorStateList colors = getResources().getColorStateList(R.drawable.title_color); tv.setTextColor(colors); //选择器的添加 tv.setLayoutParams(params); tv.setGravity(Gravity.CENTER_VERTICAL);//垂直居中
MainActivity.java 位置的计算图解见下面
import java.util.ArrayList; import android.os.Bundle; import android.content.res.ColorStateList; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.View; import android.view.View.OnClickListener; import android.view.Window; import android.widget.HorizontalScrollView; import android.widget.LinearLayout; import android.widget.TextView; /** 思路: 1.初始化控件 2.根据标题的数量初始化titleTab 1.设置标题文本 2.设置颜色 3.动态添加到线性布局 4.添加到集合方便管理 3.初始fragment,填充到viewpager 1.初始fragment,传入标题 2.放到集合 3.实现viewpageradapter 4.设置适配器 4.给titletab设置点击事件, 1.点击后viewpager跳转到相应的页面, 2.标题的状态随着改变 5.左右切换fragment监听 1.让与当前选中的fragment对应的titletab变成选中状态 2.滚动到屏幕里面来 */ public class MainActivity extends FragmentActivity { private String[] titles=new String[]{"推荐", "热点", "北京", "视频", "社会", "订阅", "图片", "娱乐", "科技", "汽车", "体育", "财经", "军事", "国际", "段子", "趣图"}; /** * 装标题栏的滑动组件,通过该控件来控制textview的位置 */ private HorizontalScrollView titlesGroup; /** * 装标题,通过该布局对象来获取子控件 */ private LinearLayout titleLayout; private ViewPager viewPager; /** * 装fragment的集合 */ private ArrayList<Fragment> list; /** * 记录当前选中的textView标题 */ private int currentTextView=0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); titlesGroup = (HorizontalScrollView) findViewById(R.id.titlesGroup); titleLayout = (LinearLayout) findViewById(R.id.titleParent); viewPager = (ViewPager) findViewById(R.id.viewPager); initData(); //为视图页设置适配器 viewPager.setAdapter(new MyAdapter(getSupportFragmentManager())); //第一次启动程序的设置 titleLayout.getChildAt(0).setEnabled(false); //为ViewPager设置监听事件 viewPager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int position) { titleLayout.getChildAt(position).setEnabled(false); //改变上一次点击的TextView的状态 titleLayout.getChildAt(currentTextView).setEnabled(true); currentTextView=position;//更改标记 //改变选中的TextView的位置 changePosition(position); } /** * 作用:让超出屏幕的标题显示到手机中间位置 * 改变TextView的位置,避免当前选中的textView显示到屏幕外 */ private void changePosition(int position) { //得到需要改变位置的标题(滚动到屏幕中间) TextView tv=(TextView) titleLayout.getChildAt(position); //获取屏幕一半的宽度 int screenWidth = (getResources().getDisplayMetrics().widthPixels)/2; int tvWidth=tv.getWidth()/2;//控件一半的宽度 //获得该控件与父控件左边缘的距离 int leftMarg = tv.getLeft(); int dx=leftMarg-(screenWidth-tvWidth); titlesGroup.smoothScrollTo(dx, 0);//缓和的移动到这个位置 } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageScrollStateChanged(int state) { } }); } /** * 将创建的fragment填充给ViewPager */ class MyAdapter extends FragmentPagerAdapter{ public MyAdapter(FragmentManager fm) { super(fm); } @Override public int getCount() { return list.size();//确定ViewPager显示的碎片个数 } @Override public Fragment getItem(int position) { return list.get(position); } } /** * 初始化数据(标题栏条目与Fragment) */ private void initData() { list=new ArrayList<Fragment>(); for (int i = 0; i < titles.length; i++) { TextView tv=new TextView(MainActivity.this); tv.setText(titles[i]); tv.setTextSize(25); tv.setBackgroundResource(R.drawable.title_bgimg); tv.setClickable(true);//设置为可点击 //根据enbled属性改变文本颜色 ColorStateList colorStateList = getResources().getColorStateList(R.drawable.title_color); tv.setTextColor(colorStateList); tv.setTag(i);//为该文本设置标记,好确认点击的是哪个textView tv.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { int tag=(Integer) v.getTag();//获取该TextView的标记 //改变ViewPager显示的页面,该方法执行后会执行viewPager的监听事件 viewPager.setCurrentItem(tag);//setCurrentItem(tag,false),这样就是直接跳转到tag这页.不会经过中间页 }//默认第二个参数为true,假设当前显示的第一页,当你点击显示第四页的标题头时2,这样viewPager会经过第二页和第三页 }); titleLayout.addView(tv);//将创建的标题添加到横向滚动条里 initFragment(titles[i]);//创建该标签下的fragment } } /** * 初始化fragment * @param i为对应的标题的索引,这里将标题名做为数据给碎片显示 */ private void initFragment(String title) { MyFragment fragment=new MyFragment(); Bundle bundle=new Bundle(); bundle.putString("value", title); fragment.setArguments(bundle); list.add(fragment);//将创建的碎片添加到集合 } }
MyFragment.java 注意继承的v4包下的
import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class MyFragment extends Fragment{ @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_layout, null); TextView textView=(TextView) view.findViewById(R.id.textView); //获取activity传过来的数据 String value = getArguments().getString("value"); textView.setText(value); return view; } }
主布局 activity_main.xml
<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"> <!--HorizontalScrollView只能有一个子条目,所以需要放一个布局 --> <HorizontalScrollView android:id="@+id/titlesGroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="none"> <!-- 用来存放标题头 --> <LinearLayout android:id="@+id/titleParent" android:layout_width="match_parent" android:gravity="center" android:layout_height="wrap_content" android:orientation="horizontal"> </LinearLayout> </HorizontalScrollView> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="#000000"/> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout>
碎片显示的布局文件fragment_layout.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffcccc"> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:textSize="40sp" android:textColor="#000000"/> </RelativeLayout>
标题栏的字体和背景图片的设置:res/drawable下
title_bgimg.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 一张为白色的图片,一张为底部为蓝色线条的图片 --> <item android:state_enabled="true" android:drawable="@drawable/bg_normal"></item> <item android:state_enabled="false" android:drawable="@drawable/bg_tab"></item> </selector>
title_color.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 设置文字的颜色 当设置为false后,该文本再次点击将无效果,默认为true 灰色--> <item android:state_enabled="false" android:color="#000000"/> <item android:state_enabled="true" android:color="#82858b"></item> </selector>
效果图:和位置的计算方式
