Fragment,仿QQ空間

轉載請註明出處：http://blog.csdn.net/yangyu20121224/article/details/9023451         

 

     在今天的這篇文章當中，我依然會以實戰加理論結合的方式教你們如何設計出本身以爲很炫的UI界面。好的，話很少說，進入正題。今天的這篇文章主要是以仿QQ空間的底部菜單欄效果爲主，實現的效果有：

<1>實現了點擊按鈕時的切換圖片效果；

<2>實現了點擊按鈕時的切換界面效果；

<3>實現了點擊中間圓形按鈕時彈出菜單以及按鈕圖片切換效果；

<4>實現了點擊空白處和返回鍵按鈕來關閉彈出菜單。

 

          有個地方須要注意的是，彈出菜單欄後，點擊裏面的選項按鈕會致使中間的圓形按鈕切換爲普通狀態，這是由於在實際的項目中，點擊菜單選項按鈕以後會進入別的界面，因此也就不存在點擊了以後圓形的按鈕切換爲普通的狀態效果了，因此這裏也不須要太在乎。爲了實現效果，這裏只適配了480x800 hdpi的屏幕大小。

 

 

1、效果圖

 

有圖纔有真相

 

 

 

2、項目結構圖

 

 

3、代碼詳細編寫

 

一、主佈局界面，activity_main.xml：

<span style="font-size:12px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <FrameLayout
        android:id="@+id/frame_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/frameLayout1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="#ffffff" >
    </FrameLayout>

    <FrameLayout
        android:id="@+id/frameLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="@drawable/toolbar_bg_normal" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginTop="1dp"
            android:gravity="center_horizontal" >

            <FrameLayout
                android:id="@+id/layout_friendfeed"
                android:layout_width="fill_parent"
                android:layout_height="48dp"
                android:layout_weight="1" 
                android:background="@drawable/tab_btn_background">

                <ImageView
                    android:id="@+id/image_friendfeed"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:layout_marginTop="1.0dip"
                    android:src="@drawable/tab_friendfeed_btn" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="6.0dip"
                    android:text="動態"
                    android:textColor="#ffffff"
                    android:textSize="10sp" />
            </FrameLayout>

            <FrameLayout
                android:id="@+id/layout_myfeed"
                android:layout_width="fill_parent"
                android:layout_height="48dp"
                android:layout_weight="1" 
                android:background="@drawable/tab_btn_background">

                <ImageView
                    android:id="@+id/image_myfeed"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:layout_marginTop="1.0dip"
                    android:src="@drawable/tab_myfeed_btn" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="6.0dip"
                    android:text="與我想關"
                    android:textColor="#ffffff"
                    android:textSize="10sp" />
            </FrameLayout>

            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >
            </FrameLayout>

            <FrameLayout
                android:id="@+id/layout_home"
                android:layout_width="fill_parent"
                android:layout_height="48dp"
                android:layout_weight="1" 
                android:background="@drawable/tab_btn_background">

                <ImageView
                    android:id="@+id/image_home"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:layout_marginTop="1.0dip"
                    android:src="@drawable/tab_home_btn" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="6.0dip"
                    android:text="個人空間"
                    android:textColor="#ffffff"
                    android:textSize="10sp" />
            </FrameLayout>

            <FrameLayout
                android:id="@+id/layout_more"
                android:layout_width="fill_parent"
                android:layout_height="48dp"
                android:layout_weight="1" 
                android:background="@drawable/tab_btn_background">

                <ImageView
                    android:id="@+id/image_more"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:layout_marginTop="1.0dip"
                    android:src="@drawable/tab_more_btn" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="6.0dip"
                    android:text="更多"
                    android:textColor="#ffffff"
                    android:textSize="10sp" />
            </FrameLayout>
        </LinearLayout>
    </FrameLayout>

    <ImageView
        android:id="@+id/toggle_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/toolbar_btn_normal" />

    <ImageView
        android:id="@+id/plus_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/frameLayout1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="6dip"
        android:src="@drawable/toolbar_plus" />

</RelativeLayout></span>

我以爲這個佈局界面是整個項目當中實現起來最複雜的地方，可是把思路理清楚了以後又以爲其實也沒有那麼複雜，詳細說一下我實現的步驟：

 

       <1> 最外層使用的是RelativeLayout，主要是爲了容易擺放底部菜單欄的位置；

       <2> 而後是一個FrameLayout，主要用來存放顯示Fragment的內容，這裏的ID取名爲frame_content是用來替換Fragment對象的，在後面的代碼中會用到；

       <3> 最下面的底部菜單欄中外層使用了FrameLayout，之因此使用FrameLayout是爲了讓底部菜單欄中間的按鈕也能夠擺放進來，實現一種疊加的效果；

       <4> 裏面嵌套了LinearLayout，使用它是爲了可以使用layout_weight屬性，能夠用來更好的擺放按鈕，還能夠實現自適應屏幕的效果（關於自適應屏幕的內容後面會有專題詳細講解）

       <5> 最後裏面又嵌套了一個FrameLayout，使用它能夠很方便的實現圖標在上文字在下的效果，最主要的緣由是使用它能夠很容易的再添加一個消息提醒的小圖片（實際的開發中會用到，此項目中沒有用到）

 

二、彈出菜單的佈局界面，popwindow_layout.xml：

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@drawable/popwindow_bg"
        android:orientation="vertical"
        tools:ignore="UselessParent" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="15dp"
            android:orientation="horizontal" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:orientation="vertical" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="1.0dip"
                    android:src="@drawable/popwindow_write_btn" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5.0dip"
                    android:shadowColor="#ff000000"
                    android:shadowDx="1.0"
                    android:shadowDy="1.0"
                    android:shadowRadius="1.0"
                    android:text="說說"
                    android:textColor="#ffffffff"
                    android:textSize="13.0dip" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:orientation="vertical" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="1.0dip"
                    android:src="@drawable/popwindow_voice_btn" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5.0dip"
                    android:shadowColor="#ff000000"
                    android:shadowDx="1.0"
                    android:shadowDy="1.0"
                    android:shadowRadius="1.0"
                    android:text="語音"
                    android:textColor="#ffffffff"
                    android:textSize="13.0dip" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:orientation="vertical" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="1.0dip"
                    android:src="@drawable/popwindow_camera_btn" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5.0dip"
                    android:shadowColor="#ff000000"
                    android:shadowDx="1.0"
                    android:shadowDy="1.0"
                    android:shadowRadius="1.0"
                    android:text="照片"
                    android:textColor="#ffffffff"
                    android:textSize="13.0dip" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:orientation="vertical" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="1.0dip"
                    android:src="@drawable/popwindow_picture_btn" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5.0dip"
                    android:shadowColor="#ff000000"
                    android:shadowDx="1.0"
                    android:shadowDy="1.0"
                    android:shadowRadius="1.0"
                    android:text="視頻"
                    android:textColor="#ffffffff"
                    android:textSize="13.0dip" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:orientation="vertical" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="1.0dip"
                    android:src="@drawable/popwindow_sign_btn" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5.0dip"
                    android:shadowColor="#ff000000"
                    android:shadowDx="1.0"
                    android:shadowDy="1.0"
                    android:shadowRadius="1.0"
                    android:text="簽到"
                    android:textColor="#ffffffff"
                    android:textSize="13.0dip" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

</RelativeLayout></span>

三、其中一個Fragment佈局頁面，fragment_1.xml：

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/xianjian01" >
    </ImageView>

</LinearLayout></span>

 

四、自定義按鈕的資源文件，因爲比較簡單，就列出其中一個，tab_friendfeed_btn.xml：

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/toolbar_friendfeed_pressed" android:state_selected="true"/>
    <item android:drawable="@drawable/toolbar_friendfeed_normal"/>

</selector></span>

五、主Activity界面，MainActivity.java：

<span style="font-size:12px;">package com.yangyu.mycustomtab03;

import android.content.Context;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.PopupWindow.OnDismissListener;

public class MainActivity extends FragmentActivity implements OnClickListener{
    //定義Fragment頁面
    private FragmentPage1 fragmentPage1;
    private FragmentPage2 fragmentPage2;
    private FragmentPage3 fragmentPage3;
    private FragmentPage4 fragmentPage4;
        
    //定義佈局對象
    private FrameLayout friendfeedFl,myfeedFl,homeFl,moreFl;
    
    //定義圖片組件對象
    private ImageView friendfeedIv,myfeedIv,homeIv,moreIv;
    
    //定義按鈕圖片組件
    private ImageView toggleImageView,plusImageView;
    
    //定義PopupWindow
    private PopupWindow popWindow;
       
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        initView();
        
        initData();
        
        //初始化默認爲選中點擊了「動態」按鈕
        clickFriendfeedBtn();
    }

    /**
     * 初始化組件
     */
    private void initView(){            
        //實例化佈局對象
        friendfeedFl = (FrameLayout)findViewById(R.id.layout_friendfeed);
        myfeedFl = (FrameLayout)findViewById(R.id.layout_myfeed);
        homeFl = (FrameLayout)findViewById(R.id.layout_home);
        moreFl = (FrameLayout)findViewById(R.id.layout_more);
        
        //實例化圖片組件對象
        friendfeedIv = (ImageView)findViewById(R.id.image_friendfeed);
        myfeedIv = (ImageView)findViewById(R.id.image_myfeed);
        homeIv = (ImageView)findViewById(R.id.image_home);
        moreIv = (ImageView)findViewById(R.id.image_more);
        
        //實例化按鈕圖片組件
        toggleImageView = (ImageView)findViewById(R.id.toggle_btn);
        plusImageView = (ImageView)findViewById(R.id.plus_btn);
    }

    /**
     * 初始化數據
     */
    private void initData(){
        //給佈局對象設置監聽
        friendfeedFl.setOnClickListener(this);
        myfeedFl.setOnClickListener(this);
        homeFl.setOnClickListener(this);
        moreFl.setOnClickListener(this);

        //給按鈕圖片設置監聽
        toggleImageView.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        //點擊動態按鈕
        case R.id.layout_friendfeed:
            clickFriendfeedBtn();
            break;
        //點擊與我相關按鈕
        case R.id.layout_myfeed:
            clickMyfeedBtn();
            break;
        //點擊個人空間按鈕
        case R.id.layout_home:
            clickHomeBtn();
            break;
        //點擊更多按鈕
        case R.id.layout_more:
            clickMoreBtn();
            break;
        //點擊中間按鈕
        case R.id.toggle_btn:
            clickToggleBtn();
            break;        
        }
    }
    
    /**
     * 顯示PopupWindow彈出菜單
     */
    private void showPopupWindow(View parent){
        if (popWindow == null) {        
            LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(R.layout.popwindow_layout,null);
            // 建立一個PopuWidow對象
            popWindow = new PopupWindow(view,LinearLayout.LayoutParams.FILL_PARENT, 200);
        }    
        // 使其彙集 ，要想監聽菜單裏控件的事件就必需要調用此方法
        popWindow.setFocusable(true);
        // 設置容許在外點擊消失
        popWindow.setOutsideTouchable(true);
        // 設置背景，這個是爲了點擊「返回Back」也能使其消失，而且並不會影響你的背景
        popWindow.setBackgroundDrawable(new BitmapDrawable());        
        //設置菜單顯示的位置
        popWindow.showAsDropDown(parent, Gravity.CENTER, 0);

        //監聽菜單的關閉事件
        popWindow.setOnDismissListener(new OnDismissListener() {            
            @Override
            public void onDismiss() {
                //改變顯示的按鈕圖片爲正常狀態
                changeButtonImage();                
            }
        });
        
        //監聽觸屏事件
        popWindow.setTouchInterceptor(new OnTouchListener() {
            public boolean onTouch(View view, MotionEvent event) {            
                //改變顯示的按鈕圖片爲正常狀態
                changeButtonImage();

                return false;                                
            }
        });
    }    
    
    /**
     * 點擊了「動態」按鈕
     */
    private void clickFriendfeedBtn(){
        //實例化Fragment頁面
        fragmentPage1 = new FragmentPage1();
        //獲得Fragment事務管理器
        FragmentTransaction    fragmentTransaction = this.getSupportFragmentManager().beginTransaction();
        //替換當前的頁面
        fragmentTransaction.replace(R.id.frame_content, fragmentPage1);
        //事務管理提交
        fragmentTransaction.commit();
        
        friendfeedFl.setSelected(true);
        friendfeedIv.setSelected(true);
        
        myfeedFl.setSelected(false);
        myfeedIv.setSelected(false);
        
        homeFl.setSelected(false);
        homeIv.setSelected(false);
        
        moreFl.setSelected(false);
        moreIv.setSelected(false);
    }
    
    /**
     * 點擊了「與我相關」按鈕
     */
    private void clickMyfeedBtn(){
        // 實例化Fragment頁面
        fragmentPage2 = new FragmentPage2();
        // 獲得Fragment事務管理器
        FragmentTransaction fragmentTransaction = this.getSupportFragmentManager().beginTransaction();
        // 替換當前的頁面
        fragmentTransaction.replace(R.id.frame_content, fragmentPage2);
        // 事務管理提交
        fragmentTransaction.commit();
        
        friendfeedFl.setSelected(false);
        friendfeedIv.setSelected(false);
        
        myfeedFl.setSelected(true);
        myfeedIv.setSelected(true);
        
        homeFl.setSelected(false);
        homeIv.setSelected(false);
        
        moreFl.setSelected(false);
        moreIv.setSelected(false);
    }
    
    /**
     * 點擊了「個人空間」按鈕
     */
    private void clickHomeBtn(){
        // 實例化Fragment頁面
        fragmentPage3 = new FragmentPage3();
        // 獲得Fragment事務管理器
        FragmentTransaction fragmentTransaction = this.getSupportFragmentManager().beginTransaction();
        // 替換當前的頁面
        fragmentTransaction.replace(R.id.frame_content, fragmentPage3);
        // 事務管理提交
        fragmentTransaction.commit();
                
        friendfeedFl.setSelected(false);
        friendfeedIv.setSelected(false);
        
        myfeedFl.setSelected(false);
        myfeedIv.setSelected(false);
        
        homeFl.setSelected(true);
        homeIv.setSelected(true);
        
        moreFl.setSelected(false);
        moreIv.setSelected(false);
    }
    
    /**
     * 點擊了「更多」按鈕
     */
    private void clickMoreBtn(){
        // 實例化Fragment頁面
        fragmentPage4 = new FragmentPage4();
        // 獲得Fragment事務管理器
        FragmentTransaction fragmentTransaction = this.getSupportFragmentManager().beginTransaction();
        // 替換當前的頁面
        fragmentTransaction.replace(R.id.frame_content, fragmentPage4);
        // 事務管理提交
        fragmentTransaction.commit();
        
        friendfeedFl.setSelected(false);
        friendfeedIv.setSelected(false);
        
        myfeedFl.setSelected(false);
        myfeedIv.setSelected(false);
        
        homeFl.setSelected(false);
        homeIv.setSelected(false);
        
        moreFl.setSelected(true);
        moreIv.setSelected(true);
    }
    
    /**
     * 點擊了中間按鈕
     */
    private void clickToggleBtn(){        
        showPopupWindow(toggleImageView);
        //改變按鈕顯示的圖片爲按下時的狀態
        plusImageView.setImageResource(R.drawable.toolbar_plusback);
        toggleImageView.setImageResource(R.drawable.toolbar_btn_pressed);
    }
    
    /**
     * 改變顯示的按鈕圖片爲正常狀態
     */
    private void changeButtonImage(){
        plusImageView.setImageResource(R.drawable.toolbar_plus);
        toggleImageView.setImageResource(R.drawable.toolbar_btn_normal);
    }
        
}</span><span style="font-size:18px;">
</span>

六、Fragment其中一個頁面，FragmentPage1.java：

package com.yangyu.mycustomtab03;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentPage1 extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        
        return inflater.inflate(R.layout.fragment_1, null);        
    }    
}

        到這裏整個項目就基本上講完了，你們還能夠爲此項目繼續完善下去，實現點擊菜單選項後實現的效果以及頂部標題欄的實現。對於這個項目，博主還有一個地方不明白，就是針對此項目，在彈出菜單後，有什麼好的簡單一點的方法將背景置爲灰色？我也試了一些方法，可是效果都不是特別的理想，但願讀者有什麼想法能夠給博主留言，你們能夠互相交流學習一下。

 

 

源碼下載地址：http://download.csdn.net/detail/yangyu20121224/5516853