Android手機UI設計---”知乎“界面外觀模仿篇（四）---在Fragment裏使用ScrollView嵌套自定義listview

這是接着上一篇博客的Android手機UI設計—“知乎”模仿的界面設計四。

任務目標：較爲完善的模仿“知乎”的 發現 界面。

PS：這個我是用Android Studio2.3做的。由於自己初學Android，想模仿一個頁面來練手。於是，這個是模仿的“知乎”手機APP外觀的界面。

要實現的功能：

“知乎”的“發現”界面的實現

這個是使用ScrollView嵌套ListView的方式來實現的，主要用到的佈局方式有LinearLayout和include以及RelativeLayout。
自定義一個listview組件，達到使ListView適應ScrollView的效果 。

界面運行效果圖

源碼：
FindFragment.Java的代碼：發現界面的實現。

package com.example.lenovo.design;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.drawable.AnimatedStateListDrawable;
import android.graphics.drawable.Drawable;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.os.Parcelable;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Timer;
import java.util.TimerTask;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

/**
 * Created by lenovo on 2017/3/28.
 */


public class FindFragment extends Fragment {

    private ListView listView;
    private SimpleAdapter adapter ;
    private List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();  //爲方法二創建另一個集合
    private int[] image = new int[] { R.drawable.z1, R.drawable.z1,
            R.drawable.z1, R.drawable.z1};
    private String[] mName = { "大地", "蘇沉船", "六十九", "Wuen Ge" };
    private  String[] mTitle = { "石油真的是按有機成因形成的，那麼怎麼解釋超大規模油藏的形成？", "深度學習在路徑規劃上有哪些應用？", "美國和加拿大有什麼不同", "沒文化多可怕？" };
    private String[] mCon = { "悠長的歲月，在無數人類生命的時間尺度上，吟唱着屬於自己的滄海桑田！", "深度學習說到底仍然是一種機器學習框架，Supervised learning", "美國大型娛樂場所，加拿大是家的感覺。", "無土栽培室" };
    private  String[] mZ = { "142贊·32評論·關注問題", "134贊·16評論·去往專欄", "755贊·89評論·關注問題", "543贊·290評論·關注問題" };


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View findLayout = inflater.inflate(R.layout.find_layout, container, false);

        View view = inflater.inflate(R.layout.find_list, null);
        //將listView與佈局對象關聯
        listView = (ListView) findLayout.findViewById(R.id.listview3);
        for(int i = 0; i < mName.length; i ++){
            Map<String,Object> item = new HashMap<String,Object>();
            item.put("img", image[i]);
            item.put("name", mName[i]);
            item.put("title",mTitle[i]);
            item.put("num", mCon[i]);
            item.put("zan", mZ[i]);
            list.add(item);
        }
        adapter = new SimpleAdapter(getActivity(),list,R.layout.find_list,
                new String[]{"img","name","title","num","zan"},new int[]{R.id.img,R.id.huati,R.id.title,R.id.content,R.id.zan});
        listView.setAdapter(adapter);

        return findLayout;
    }
}

MyListView.java的代碼:自定義listview組件

package com.example.lenovo.design;

import android.app.ListActivity;
import android.content.Context;
import android.provider.Telephony;
import android.util.AttributeSet;
import android.widget.ListView;

/**
 * Created by lenovo on 2017/4/4.
 */

public class MyListView extends ListView {


    public MyListView(Context context) {
        super(context);

    }

    public MyListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE>>2,MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}

界面佈局的具體實現

find_layout.xml的代碼：發現界面的主佈局，com.example.lenovo.design.MyListView便是自定義的listview組件的使用了。

<?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:visibility="visible"
        layout="@layout/find_title_layout"
        android:id="@+id/include2">
    </include>

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/include2"
        android:scrollbars="none">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    <ImageView
                        android:layout_width="30px"
                        android:src="@drawable/h"
                        android:background="@color/white"
                        android:layout_height="30px" />
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="30px"
                        android:text="熱門內容"
                        android:textSize="12dp"
                        android:textColor="@color/black"
                        android:background="@color/white" />

                </LinearLayout>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="3px"
                android:background="@color/whitesmoke" />

            <com.example.lenovo.design.MyListView
                android:id="@+id/listview3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:entries="@array/title">

            </com.example.lenovo.design.MyListView>
        </LinearLayout>
    </ScrollView>

</RelativeLayout>

find_list.xml的代碼：自定義listview的item

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




    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white" >
        <ImageView
            android:id="@+id/img"
            android:src="@drawable/cnshu"
            android:layout_width="50px"
            android:layout_height="50px" />

        <TextView
            android:id="@+id/huati"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:textColor="@color/darkgrey"
            android:textSize="30px"
            android:text="來自話題：健康"
            android:layout_weight="1"/>


    </LinearLayout>


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white" >

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:text="有那些好習慣"
            android:textSize="33px"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/slategray"
            android:textSize="30px"
            android:text="有那些好習慣"
            android:layout_weight="1"/>

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white" >

        <TextView
            android:id="@+id/zan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/darkgrey"
            android:textSize="30px"
            android:text="3232贊同"
            android:layout_weight="1"/>

    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="10px"
        android:background="@color/whitesmoke" />
</LinearLayout>

find_title_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="56dp"
    android:background="@color/royalblue"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/title_imv"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:src="@android:drawable/ic_menu_more" />
    <TextView
        android:id="@+id/title_text_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="發 現"
        android:textSize="20sp"
        android:textColor="@color/lightcyan"/>

</RelativeLayout>

總結：

ScrollView中只能放一個控件，一般都放LinearLayout，orientation屬性值爲vertical。在LinearLayout中放需要呈現的內容。自定義的ListView也在其中，ListView的高度設爲適應自身內容。然後通過自定義組件來解決listview顯示不全的問題。

參考直通地址：http://www.cnblogs.com/renqiqiang/p/5677001.html