ViewPager的实现：通过HorizontalScrollView

最新推荐文章于 2019-06-24 08:56:51 发布

changhaiSmile

最新推荐文章于 2019-06-24 08:56:51 发布

阅读量472

点赞数

分类专栏： Android开发文章标签： ViewPager HorizontalScrollView

本文链接：https://blog.csdn.net/zchlww/article/details/50585991

版权

Android开发专栏收录该内容

299 篇文章 0 订阅

订阅专栏

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

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

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

activity_main.xml:

[html]view plaincopy 
   
 <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>  

数组资源：

[html]view plaincopy 
   
 <?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：

[html]view plaincopy 
   
 <?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：

[java]view plaincopy 
   
 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>();  
   
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_main);  
         // 初始化书签选项卡  
         initTabs();  
         // 初始化ViewPager  
         initViewPager();  
     }  
   
     /** 
      * 初始化标签 
      */  
     private void initTabs() {  
         //获取HorizontalScrollView的id  
         horizontalScrollView_main = (HorizontalScrollView) findViewById(R.id.horizontalScrollView_main);  
         //获取LinearLayout的id  
         layout_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);  
             // 把宽度和高度设置给TextView  
             textView.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数组并设置一个tag  
             arrTextView[i] = textView;  
             // 利用给控件增加标签，方便携带数据并添加点击事件然后切换对应的ViewPager  
             textView.setTag(i);  
             // 设置每一个TextView的点击事件  
             textView.setOnClickListener(new OnClickListener() {  
                 @Override  
                 public 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() {  
   
             @Override  
             public void onPageSelected(int position) {  
                 // 设置每个TextView的属性和horizontalScrollView的滚动长度  
                 selectCurrenTab(position);  
   
             }  
   
             @Override  
             public void onPageScrolled(int arg0, float arg1, int arg2) {  
                 // TODO Auto-generated method stub  
   
             }  
   
             @Override  
             public 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;  
         }  
   
         @Override  
         public Fragment getItem(int position) {  
             return list.get(position);  
         }  
   
         @Override  
         public int getCount() {  
             return list.size();  
         }  
   
     }  
   
 }  

继承于ListFragment的MyFragment：

[java]view plaincopy 
   
 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);  
         }  
     }  
   
     @Override  
     public 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片图：

changhaiSmile

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ViewPager的实现：通过HorizontalScrollView

我们可以发现，在一些新闻客户端的标题栏中，它们会有很多标题，而这些标题都是可以滑动的，这种效果的实现使用的就是HorizontalScrollView，我们通过向HorizontalScrollView包含的LinearLayout中动态添加标题，这样无论我们添加多少标题，它都是可以滑动的。activity_main.xml:[html] view
复制链接

扫一扫

专栏目录