Android手机UI设计---”知乎“界面外观模仿篇（四）---在Fragment里使用ScrollView嵌套自定义listview

来源：互联网发布：安踏网络授权编辑：程序博客网时间：2024/06/05 21:56

这是接着上一篇博客的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

0 0