Android手机UI设计---”知乎“界面外观模仿篇（二）---在Fragment里使用自定义listview以及popupwindow弹出窗口

于 2017-04-07 13:08:48 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： Android 文章标签： android ui ui设计 手机 界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_37808229/article/details/69525882
版权

这是接着上一篇博客的Android手机UI设计—“知乎”模仿的界面设计二。

任务目标：较为完善的模仿“知乎”的 私信 界面。

PS：这个我是用Android Studio2.3做的。由于自己初学Android，想模仿一个页面来练手。于是，这个是模仿的“知乎”手机APP外观的界面。

要实现的功能：
（1）“知乎”私信列表的实现。

这个是使用ListView的方式来实现的，主要用到的布局方式有LinearLayout和include以及RelativeLayout。

（2）PopupWindow实现弹出窗口的效果。

这个是使用PopupWindow的方式来实现的，主要用到的布局方式有ImageView。PopupWindow是Android上自定义弹出窗口，使用起来很方便。

参照地址：http://blog.youkuaiyun.com/u010313216/article/details/40504177

界面运行效果图
这里写图片描述
PopupWindow弹出窗口的效果图
这里写图片描述

源码：
LetterFragment.Java的代码：完成私信列表的实现，和弹出窗口的效果。

package com.example.lenovo.design;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.RatingBar;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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

public class LetterFragment extends Fragment implements View.OnClickListener{
    // 定义按钮图片组件
    private ImageView toggleImageView;

    private ListView listView;
    private SimpleAdapter adapter; //创建一个SimpleAdapter
    private List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();  //为方法二创建另一个集合

   private String[] mName = { "小兔子" ,"爱上生活", "aQiu", "好奇心研究所", "KnowYourself" ,"知乎团队" };
    private  String[] mTime = { "12:22", "9:35", "6:00", "3天前", "10天前","2个月前" };
    private String[] mNum = { "哈哈哈哈","睡觉前喝牛奶，好不好？", "你在吗？", "为什么手机不能飞？", "人能所做到的最大善良","xmh，2016是一个神奇的年份！" };
   private int[] image = new int[] { R.drawable.h, R.drawable.sdian,
            R.drawable.z1, R.drawable.scj,R.drawable.yz,R.drawable.z1};
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View letterLayout = inflater.inflate(R.layout.letter_layout,
                container, false);


        //将listView与布局对象关联
        listView = (ListView) letterLayout.findViewById(R.id.listview1);
        for(int i = 0; i < mNum.length; i ++){
            Map<String,Object> item = new HashMap<String,Object>();
            item.put("name", mName[i]);
            item.put("time",mTime[i]);
            item.put("num", mNum[i]);
            item.put("img", image[i]);
            list.add(item);
        }
        adapter = new SimpleAdapter(getActivity(),list,R.layout.letter_list,
                new String[]{"name","time","num","img"},new int[]{R.id.title,R.id.time,R.id.info,R.id.img});
        listView.setAdapter(adapter);

        // 实例化按钮图片组件
        toggleImageView = (ImageView) letterLayout.findViewById(R.id.show);
        // 给按钮图片设置监听
        toggleImageView.setOnClickListener(this);

        return letterLayout;
        }

    //popupWindow点击事件
    @Override
    public void onClick(View v) {

        View view = LayoutInflater.from(getActivity()).inflate(R.layout.popupwindow_layout,null);
        //创建实例化PopupWindow（窗体视图，宽，高）
        PopupWindow popupWindow = new PopupWindow(view, ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);

        popupWindow.setBackgroundDrawable(getResources().getDrawable(R.color.silver));
        popupWindow.setAnimationStyle(android.R.style.DeviceDefault_Light_ButtonBar_AlertDialog);
        popupWindow.getBackground().setAlpha(100);
        popupWindow.setOutsideTouchable(true);
        popupWindow.setFocusable(true);
        popupWindow.setTouchable(true);
        popupWindow.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_MODE_CHANGED);


        popupWindow.showAtLocation(v, Gravity.NO_GRAVITY,0,0);
    }
}

界面布局的具体实现

letter_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="match_parent">


    <LinearLayout
        android:id="@+id/widget1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
        <include
            android:visibility="visible"
            layout="@layout/letter_title_layout"
            >
        </include>
        <ListView android:id="@+id/listview1"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </ListView>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_alignParentRight="true"
        >

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

        </LinearLayout>
        <ImageView
            android:id="@+id/show"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/jh"/>
    </LinearLayout>

</RelativeLayout>

letter_title_layout.xml的代码:就是在主布局letter_layout.xml里的<include>包含的内容，这个<include>可以让你写的太长的代码，裹出一部分到一个新布局里，你直接引用就可以。<include>一般用来包含公共部分。

<?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>

letter_list.xml的代码：对应listview的一个item布局。

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

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white" >
    <ImageView
        android:id="@+id/img"
        android:layout_width="100px"
        android:layout_height="100px"
        android:layout_margin="6px" />


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/darkslategray"
                android:textSize="30px"
                android:layout_weight="1"/>

            <TextView
                android:id="@+id/time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/slategrey"
                android:textSize="25px" />

        </LinearLayout>
        <TextView
            android:id="@+id/info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/slategrey"
            android:textSize="25px" />

    </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:textColor="#0000ff"
        android:textSize="25px"
        />

        </LinearLayout>

    </LinearLayout>
</LinearLayout>

popupwindow_layout.xml的代码：用于popupwindow弹出的窗口界面。

<?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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="0.6">
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1">
            </LinearLayout>

            <LinearLayout
                android:id="@+id/yy"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical">


                <LinearLayout
                    android:id="@+id/oo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:orientation="horizontal"
                        android:paddingTop="10dp">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:background="@color/white"
                            android:id="@+id/serif"
                            android:text="新建"
                            android:textSize="20dp" />

                        <TextView
                            android:layout_width="20px"
                            android:layout_height="wrap_content" />

                        <ImageView
                            android:layout_width="35dp"
                            android:layout_height="35dp"
                            android:src="@drawable/fx" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:orientation="horizontal"
                        android:paddingTop="10dp">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:background="@color/white"
                            android:text="回复"
                            android:textSize="20dp" />

                        <TextView
                            android:layout_width="20px"
                            android:layout_height="wrap_content" />

                        <ImageView
                            android:layout_width="35dp"
                            android:layout_height="35dp"
                            android:src="@drawable/hd" />
                    </LinearLayout>

                </LinearLayout>

            </LinearLayout>

        </LinearLayout>
    </LinearLayout>


</RelativeLayout>

总结：

在这个界面里，在使用自定义的listview时，它的每一种item布局都是相同的，所以没有什么大问题。但是，如果我们需要listview显示出每一条item都不同，那就需要使用RecyclerView替代ListView。
RecyclerView是一个比ListView更灵活的一个控件，可以通过导入support-v7对其进行使用。
这里有地址直通去了解RecyclerView：http://blog.youkuaiyun.com/lmj623565791/article/details/45059587

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值