Android商城開發系列（五）—— 商城首頁回到頂部和搜索框布局實現

　　今天我們來開發商城的首頁【輸入搜索框】布局和點擊右下角圖片回到頂部的效果

　　搜索功能在App中很常見，尤其是在商城類的項目當中，一般都會提供很強大的搜索功能，App的搜索布局一般都是在App的頂部，如下圖所示：

　　

　　下面我們來看看如何實現這個布局效果：

　　先來看看HomeFragment類，代碼如下所示：

package com.nyl.shoppingmall.home.fragment;

import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.nyl.shoppingmall.R;
import com.nyl.shoppingmall.base.BaseFragment;

/**
 * 首頁Fragment
 */
public class HomeFragment extends BaseFragment implements View.OnClickListener {

    private final static String TAG = HomeFragment.class.getSimpleName();

    private TextView tv_search_home;
    private TextView tv_message_home;
    private RecyclerView rv_home;
    private ImageView ib_top;

    @Override
    public View initView() {
        Log.e(TAG,"主頁面的Fragment的UI被初始化了");
        View view = View.inflate(mContext,R.layout.fragment_home,null);
        //初始化布局控件
        tv_search_home = (TextView) view.findViewById(R.id.tv_search_home);
        tv_message_home = (TextView) view.findViewById(R.id.tv_message_home);
        rv_home = (RecyclerView) view.findViewById(R.id.rv_home);
        ib_top = (ImageView) view.findViewById(R.id.ib_top);

        //設置點擊事件
        ib_top.setOnClickListener(this);
        tv_search_home.setOnClickListener(this);
        tv_message_home.setOnClickListener(this);
        return view;
    }


    @Override
    public void initData() {
        super.initData();
        Log.e(TAG,"主頁面的Fragment的數據被初始化了");
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.ib_top: //置頂的監聽
                rv_home.scrollToPosition(0);
                break;
            case R.id.tv_search_home:  //搜索的監聽
                Toast.makeText(mContext,"搜索",Toast.LENGTH_SHORT).show();
                break;
            case R.id.tv_message_home: //消息監聽
                Toast.makeText(mContext,"進入消息中心",Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

　　HomeFragment類加載的是fragment_home.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="match_parent">

    <include
        android:id="@+id/titlebar"
        layout="@layout/titlebar"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/titlebar" />

    <ImageButton
        android:id="@+id/ib_top"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:background="@mipmap/ic_launcher"
        android:visibility="visible" />


</RelativeLayout>

　　最外層是相對布局：頂部是線性布局，里面有兩個TextView； 中間是使用分類型的 RecyclerView 當滑動底部的時候顯示跳轉到頂部的按鈕，兩個TextView是使用<include  layout="@layout/titlebar"/>把布局包進來的，titlebar布局的代碼如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ed3f3f">

    <TextView
        android:id="@+id/tv_search_home"
        android:layout_width="wrap_content"
        android:layout_height="35dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"
        android:layout_weight="1"
        android:background="@drawable/search_home_shape"
        android:drawableLeft="@mipmap/home_search_icon"
        android:drawablePadding="10dp"
        android:gravity="center_vertical"
        android:padding="5dp"
        android:text="輸入搜索信息"
        android:textSize="13sp" />

    <TextView
        android:id="@+id/tv_message_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:drawableTop="@mipmap/new_message_icon"
        android:text="消息"
        android:textColor="#fff"/>

</LinearLayout>

　　輸入搜索信息框的背景顏色在drawable下實現，代碼如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#fff" />
    <corners android:radius="3dp" />
</shape>

　　這樣就完成了嗎？當去運行程序會報錯，我們還少了最重要一步，別忘了我們在fragment_home.xml的布局中用到了RecyclerView，要把RecyclerView的包加載進來，如下圖所示：

　　最后一步要檢查RecyclerView的包加載進來是否成功，打開Module:app，如下圖所示：

　　

　　　　上面都是講關於搜索框布局的實現，還有一個地方沒有講到，就是點擊右下角圖片回到頂部的效果，那么這個功能是怎么實現的呢？

　　　　HomeFragment類中的onclick方法中rv_home.scrollToPosition(0);如下圖所示：

　　

　　其實就是這一句代碼就可以實現回到頂部的效果了。

　　好了，我們這節先完善到這里，下節繼續。