ViewPager的實現：通過HorizontalScrollView

原創 匡效国 2020-02-23 09:55

我們可以發現，在一些新聞客戶端的標題欄中，它們會有很多標題，而這些標題都是可以滑動的，這種效果的實現使用

的就是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>();

	@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： 

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片圖：



發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章