? ? 前面的文章已經講述了"隨手拍"項目圖像處理的技術部分,該篇文章主要是主界面的布局及屏幕滑動切換,并結合鴻洋大神的視頻和郭神的第一行代碼(強推兩人Android博客),完成了下面的內容:
? ? (1).學習使用Include布局XML
? ? (2).通過添加適配器加載fragment
? ? (3).實現滑動觸摸切換屏幕ViewPager
? ? (4).改變圖標及背景,并響應fragment中控件及傳遞參數
參考資料:
? ? 郭霖大神的《Android第一行代碼》
? ? 鴻洋大神的微信界面?http://www.imooc.com/learn/198?

一. 運行效果

? ?如下圖所示,滑動屏幕可以切換布局"空間"、"相冊"、"關注".同時會有圖標顏色變藍,背景顏色加深的效果.
? ??
? ? 同時添加了按鈕事件,在fragment1中點擊按鈕顯示內容,在fragment3中點擊按鈕獲取第二個布局內容并顯示.
? ??

二. 項目工程結構

三. Include布局XML文件

? ?首先添加頭部布局top_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="50dp"android:paddingLeft="12dp"android:paddingRight="12dp"android:background="@drawable/image_toolbar_bg" ><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_gravity="center"android:orientation="horizontal" ><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:src="@drawable/icon_suishoupai" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="12dp"android:text="隨手拍"android:textSize="15sp"android:layout_gravity="center"android:textColor="#ffffff" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_gravity="center"android:layout_alignParentRight="true"android:orientation="horizontal" ><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:src="@drawable/image_top_watch" /><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:src="@drawable/image_top_add" /></LinearLayout> </RelativeLayout> ? ? 然后添加底部布局bottom_layout.xml,由3個LinearLayout水平布局組成,其中每個LinearLayout有ImageView和TextView組成：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="40dp"android:background="@drawable/image_toolbar_bg"android:orientation="horizontal" ><LinearLayout android:id="@+id/bottomLayout1"android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"android:gravity="center" android:background="@drawable/image_toolbar_bg_sel"android:orientation="vertical" > <ImageView android:id="@+id/image1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="1dp" android:src="@drawable/image_bottom_effect" /> <TextView android:layout_width="wrap_content" android:layout_height="15dp" android:text="空間" android:textColor="#ffffff" android:textSize="10dp" /> </LinearLayout><LinearLayout android:id="@+id/bottomLayout2"android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/image2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="1dp" android:src="@drawable/image_bottom_frame_no" /> <TextView android:layout_width="wrap_content" android:layout_height="15dp" android:text="相冊" android:textColor="#ffffff" android:textSize="10dp" /> </LinearLayout> <LinearLayout android:id="@+id/bottomLayout3"android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/image3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="1dp" android:src="@drawable/image_bottom_person_no" /> <TextView android:layout_width="wrap_content" android:layout_height="15dp" android:text="關注" android:textColor="#ffffff" android:textSize="10dp" /> </LinearLayout> </LinearLayout> ? ? 最后在activity_main.xml中調用Include布局,ViewPager用于加載不同的fragment,并實現觸屏切換在該控件上： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/container"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><include layout="@layout/top_layout"/><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager1"android:layout_width="match_parent"android:layout_height="0dp"android:background="#ccffff"android:layout_weight="1" /><include layout="@layout/bottom_layout"/></LinearLayout> ? ?在MainActivity.java中onCreate函數設置無標題requestWindowFeature(Window.FEATURE_NO_TITLE),在xml文件中可設置Frame預覽效果無標題,顯示布局如下圖所示：

四. 實現觸屏切換fragment

? ? 首先設置Fragment的布局XML文件,fragment_layout1.xml如下,其他類似： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><TextViewandroid:id="@+id/textView1"android:layout_width="fill_parent"android:layout_height="wrap_content"android:textSize="25sp"android:gravity="center"android:text="The First Fragment" /><Buttonandroid:id="@+id/button1"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="Button1" /> </LinearLayout>? ?然后添加FragmentFirst.java、FragmentSecond.java和FragmentThird,其中FragmentSecond.java如下,其他類似： package com.example.layouttest;import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;public class FragmentSecond extends Fragment {@Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_layout2, container, false); } } ?? PS:由于剛學習Android一個月,所以文章很基礎,在新建類中可以點擊"瀏覽"自定義添加繼承超類或點擊"添加"增加接口,此處繼承Fragment.注意"import android.support.v4.app.Fragment;"所有的需要一致.
? ?然后設置MainActivity.java,代碼如下： package com.example.layouttest;import java.util.ArrayList; import java.util.List; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.view.Window;public class MainActivity extends FragmentActivity {//注意:導入時均為support.v4.app/view 保持一致private ViewPager viewPager1;private FragmentPagerAdapter fpAdapter;private List<Fragment> listData;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//注意:設置無標題需要在setContentView前調用 否則會崩潰requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);//初始化設置ViewPagersetViewPager();}private void setViewPager() {//初始化數據viewPager1 = (ViewPager) findViewById(R.id.viewpager1);listData = new ArrayList<Fragment>();FragmentFirst fragmentFirst = new FragmentFirst();FragmentSecond fragmentSecond = new FragmentSecond();FragmentThird fragmentThird = new FragmentThird();//三個布局加入列表listData.add(fragmentFirst);listData.add(fragmentSecond);listData.add(fragmentThird);//ViewPager相當于一組件容器 實現頁面切換fpAdapter =new FragmentPagerAdapter(getSupportFragmentManager()){@Overridepublic int getCount(){return listData.size();}@Overridepublic Fragment getItem(int arg0){return listData.get(arg0);}};//設置適配器viewPager1.setAdapter(fpAdapter);} }? ?此時即可實現觸屏切換效果,但同時需要注意： ? ? (1).需要把MainActivity繼承從Activity改為FragmentActivity.
? ? (2).可能會遇到錯誤"類型對于參數(FragmentFirst)不適用",你需要把導入修改"import android.support.v4.app.Fragment;"同時注意support.v4.app/view 保持一致.

五. 實現滑屏變換圖標

? ?此時設置底部滑動切換的圖標時需要添加自定義變量： //底部圖標 private ImageView image1; private ImageView image2; private ImageView image3; private LinearLayout layout1; private LinearLayout layout2; private LinearLayout layout3;? ?然后,在setViewPager()函數中"viewPager1.setAdapter(fpAdapter)"后添加如下代碼即可實現,其中switch中0、1、2對應listData中裝入的三個布局： //初始化圖標 image1 = (ImageView) findViewById(R.id.image1); image2 = (ImageView) findViewById(R.id.image2); image3 = (ImageView) findViewById(R.id.image3); layout1 = (LinearLayout) findViewById(R.id.bottomLayout1); layout2 = (LinearLayout) findViewById(R.id.bottomLayout2); layout3 = (LinearLayout) findViewById(R.id.bottomLayout3); //滑屏變換圖標 viewPager1.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0){switch(arg0){case 0://圖片切換image1.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_effect));image2.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_frame_no));image3.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_person_no));//背景加深layout1.setBackgroundResource(R.drawable.image_toolbar_bg_sel); layout2.setBackgroundResource(R.drawable.image_toolbar_bg); layout3.setBackgroundResource(R.drawable.image_toolbar_bg); break;case 1://圖片切換image1.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_effect_no));image2.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_frame));image3.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_person_no));//背景加深layout1.setBackgroundResource(R.drawable.image_toolbar_bg); layout2.setBackgroundResource(R.drawable.image_toolbar_bg_sel); layout3.setBackgroundResource(R.drawable.image_toolbar_bg); break;case 2://圖片切換image1.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_effect_no));image2.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_frame_no));image3.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_person));//背景加深layout1.setBackgroundResource(R.drawable.image_toolbar_bg); layout2.setBackgroundResource(R.drawable.image_toolbar_bg); layout3.setBackgroundResource(R.drawable.image_toolbar_bg_sel); break;}}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2){}@Overridepublic void onPageScrollStateChanged(int arg0){} });

六. 調用Fragment中按鈕及傳遞參數

? ? 設置FragmentFirst.java文件,通過onActivityCreated函數實現點擊按鈕事件： public class FragmentFirst extends Fragment {@Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_layout1, container, false); } @Overridepublic void onActivityCreated(Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);//添加Fragment1的響應事件Button button1 = (Button) getActivity().findViewById(R.id.button1);button1.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { TextView textView1 = (TextView) getActivity().findViewById(R.id.textView1);textView1.setText("在fragment1中點擊按鈕");} }); } }? ?FragmentThird.java實現點擊Fragment3中按鈕獲取Fragment2中數據： public class FragmentThird extends Fragment {@Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_layout3, container, false); } @Overridepublic void onActivityCreated(Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);//添加Fragment3的響應事件Button button3 = (Button) getActivity().findViewById(R.id.button3);button3.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { TextView textView1 = (TextView) getActivity().findViewById(R.id.textView2);TextView textView3 = (TextView) getActivity().findViewById(R.id.textView3);textView3.setText("點擊按鈕獲取fragment2信息:\n"+textView1.getText());} }); } }? ? PS:是否Fragment的XML文件TextView需要設置不同的id,如果Fragment1與Fragment2設置相同的textView1程序沒有響應.
? ? 本文主要講述使用Include布局、Fragment切屏和ViewPager滑動效果.最后希望文章對大家有所幫助,尤其是對Android初學者,文章中有錯誤或不足之處,請包涵.
??? 下載地址：http://download.csdn.net/detail/eastmount/8139915
(By:Eastmount 2014年11月10日夜1點?http://blog.csdn.net/eastmount/)

總結

以上是生活随笔為你收集整理的[Android] 使用Include布局+Fragment滑动切换屏幕的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。