ViewPager的实现:通过HorizontalScrollView

来源:互联网 发布:centos 7 mirror 编辑:程序博客网 时间:2024/05/29 02:22

我们可以发现,在一些新闻客户端的标题栏中,它们会有很多标题,而这些标题都是可以滑动的,这种效果的实现使用

的就是HorizontalScrollView,我们通过向HorizontalScrollView包含的LinearLayout中动态添加标题,这样无论我们添加

多少标题,它都是可以滑动的。

activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <!-- android:scrollbars="none"去除滚动条 -->    <HorizontalScrollView        android:id="@+id/horizontalScrollView_main"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:scrollbars="none" >        <LinearLayout            android:id="@+id/layout_container"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:orientation="horizontal" >        </LinearLayout>    </HorizontalScrollView>    <TextView        android:id="@+id/textView1"        android:layout_width="match_parent"        android:layout_height="1dp"        android:background="#0373b4" />    <android.support.v4.view.ViewPager        android:id="@+id/viewPager_main"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>
数组资源:

<?xml version="1.0" encoding="utf-8"?><resources>    <string-array name="arrTabTitles">        <item>要闻</item>        <item>视频</item>        <item>娱乐</item>        <item>体育</item>        <item>财经</item>        <item>科技</item>        <item>社会</item>        <item>军事</item>        <item>游戏</item>    </string-array></resources>
选择器selector:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/bg_tab" android:state_enabled="false"/>    <item android:drawable="@android:color/white" android:state_enabled="true"/>    <!--    android:state_pressed=""    android:state_enabled=""    android:state_checked=""    android:state_activated=""这个属性常常用于ListView的item的背景设置中。如果使用这个属性,那么ListView要设置选择模式    listView.setChoiceMode();    --></selector>
MainActivity:

package com.steven.fragmentviewpagerscrollview;import java.util.ArrayList;import java.util.List;import android.graphics.Color;import android.os.Bundle;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.Gravity;import android.view.View;import android.view.View.OnClickListener;import android.widget.HorizontalScrollView;import android.widget.LinearLayout;import android.widget.LinearLayout.LayoutParams;import android.widget.TextView;public class MainActivity extends FragmentActivity {private ViewPager viewPager_main;private HorizontalScrollView horizontalScrollView_main;private LinearLayout layout_container;private String[] arrTitleNames = null;private TextView[] arrTextView = null;private List<Fragment> totalList = new ArrayList<Fragment>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// 初始化书签选项卡initTabs();// 初始化ViewPagerinitViewPager();}/** * 初始化标签 */private void initTabs() {//获取HorizontalScrollView的idhorizontalScrollView_main = (HorizontalScrollView) findViewById(R.id.horizontalScrollView_main);//获取LinearLayout的idlayout_container = (LinearLayout) findViewById(R.id.layout_container);//获取定义的数组资源文件arrTitleNames = getResources().getStringArray(R.array.arrTabTitles);//通过定义的数组资源文件给TextView数组初始化长度arrTextView = new TextView[arrTitleNames.length];for (int i = 0; i < arrTextView.length; i++) {// 创建TextView对象TextView textView = new TextView(this);// 把资源数组中的数据设置给TextView显示textView.setText(arrTitleNames[i]);// 设置TextView的宽度和高度,都是包裹内容LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);// 把宽度和高度设置给TextViewtextView.setLayoutParams(params);// 设置TextView的位置textView.setGravity(Gravity.CENTER);// 设置TextView的内边距textView.setPadding(10, 10, 10, 10);// 给TextView设置选择器,实现TextView在选中和未选中时显示不同的图片资源textView.setBackgroundResource(R.drawable.bg_textview);// 让所有的书签都能被点击textView.setEnabled(true);// 设置字体大小textView.setTextSize(16);// 设置字体颜色textView.setTextColor(Color.BLACK);// 把TextView添加到LinearLayout容器中layout_container.addView(textView);// 把创建的TextView赋值给TextView数组并设置一个tagarrTextView[i] = textView;// 利用给控件增加标签,方便携带数据并添加点击事件然后切换对应的ViewPagertextView.setTag(i);// 设置每一个TextView的点击事件textView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// 通过上面的tag设置ViewPager的改变int position = (Integer) v.getTag();viewPager_main.setCurrentItem(position);}});}// 让第一个书签不能被点击arrTextView[0].setEnabled(false);// 设置第一个标签的颜色为红色arrTextView[0].setTextColor(Color.RED);}/** * 初始化ViewPager */private void initViewPager() {viewPager_main = (ViewPager) findViewById(R.id.viewPager_main);for (int i = 0; i < arrTextView.length; i++) {DummyFragment fragment = DummyFragment.getInstance(i + 1);totalList.add(fragment);}// 给ViewPager设置适配器viewPager_main.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), totalList));// 给ViewPager设置监听事件viewPager_main.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {// 设置每个TextView的属性和horizontalScrollView的滚动长度selectCurrenTab(position);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}});}/** * 设置ViewPager改变时每个TextView的属性和HorizontalScrollView的偏移量 *  * @param position */private void selectCurrenTab(int position) {// 先把所有的TextView的背景颜色都设置成黑色,并设置为可点击for (int i = 0; i < arrTitleNames.length; i++) {arrTextView[i].setTextColor(Color.BLACK);arrTextView[i].setEnabled(true);}// 设置当前position的TextView背景为红色,不可点击arrTextView[position].setTextColor(Color.RED);arrTextView[position].setEnabled(false);/** * 下面这些东西一时还没有搞懂,还需要进一步的理解 */// 计算屏幕的宽度int screenWidth = getResources().getDisplayMetrics().widthPixels;// 计算当前控件距离父容器的左侧的距离int leftSpace = arrTextView[position].getLeft();// 计算水平滚动视图应该偏移的数值int offset = leftSpace- (screenWidth - arrTextView[position].getWidth()) / 2;// 让水平滚动视图按照偏移量进行移动horizontalScrollView_main.smoothScrollTo(offset, 0);}/** * 创建ViewPager的适配器 *  * @author Administrator *  */class MyPagerAdapter extends FragmentPagerAdapter {private List<Fragment> list = null;public MyPagerAdapter(FragmentManager fm, List<Fragment> list) {super(fm);this.list = list;}@Overridepublic Fragment getItem(int position) {return list.get(position);}@Overridepublic int getCount() {return list.size();}}}
继承于ListFragment的MyFragment:

package com.steven.fragmentviewpagerscrollview;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.annotation.SuppressLint;import android.app.Activity;import android.os.Bundle;import android.support.v4.app.ListFragment;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ListView;import android.widget.SimpleAdapter;import android.widget.TextView;import android.widget.Toast;@SuppressLint("NewApi")public class DummyFragment extends ListFragment {private final static String KEY_NAME = "tabindex";private int tabindex = 0;private List<Map<String, Object>> totalList = new ArrayList<Map<String, Object>>();/** * 该静态方法用于在MainActivity中调用 *  * @param tabindex * @return */public static DummyFragment getInstance(int tabindex) {DummyFragment fragment = new DummyFragment();Bundle bundle = new Bundle();bundle.putInt(KEY_NAME, tabindex);fragment.setArguments(bundle);return fragment;}/** * 给List集合设置数据 */private void loadNetworkData() {tabindex = getArguments().getInt(KEY_NAME);for (int i = 0; i < 20; i++) {Map<String, Object> map = new HashMap<String, Object>();map.put("iconId", R.drawable.ic_180);map.put("title", "title_" + tabindex + "_" + i);map.put("summary", "summay_" + tabindex + "_" + i);totalList.add(map);}}@Overridepublic void onActivityCreated(Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);// 数据初始化。一般来说数据都来自于网络,需要异步访问,json解析loadNetworkData();// 创建适配器SimpleAdapter adapter = new SimpleAdapter(getActivity(), totalList,R.layout.item_dummyframent, new String[] { "iconId", "title","summary" }, new int[] { R.id.imageView_item_icon,R.id.textView_item_title, R.id.textView_item_summary });// 设置适配器setListAdapter(adapter);}}
运行结果:

下面是蓝色的下划线,是一个9片图:



0 0
原创粉丝点击