这是接着上一篇博客的Android手机UI设计—“知乎”模仿的界面设计三,而且为下一篇博客在做准备。
任务目标:较为完善的模仿“知乎”的 设置 界面。
PS:这个我是用Android Studio2.3做的。由于自己初学Android,想模仿一个页面来练手。于是,这个是模仿的“知乎”手机APP外观的界面。
要实现的功能:
“知乎”的“更多”设置界面布局实现
这个是使用ScrollView的方式来实现的,主要用到的布局方式有LinearLayout和include以及RelativeLayout。
参照地址:http://blog.csdn.net/c19344881x/article/details/43056365
界面运行效果图
源码:
MoreFragment.Java的代码:完成“更多”设置界面的实现。很简单!
package com.example.lenovo.design;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
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/29.
*/
public class MoreFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View moreLayout = inflater.inflate(R.layout.more_layout,
container, false);
return moreLayout;
}
}
界面布局的具体实现
这次主要讲布局的代码
more_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">
<RelativeLayout
android:id="@+id/widget1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff">
<include
android:visibility="visible"
layout="@layout/more_titile_layout"
android:id="@+id/include">
</include>
<ScrollView
android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/include"
android:scrollbars="none">
<include
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="@layout/layout">
</include>
</ScrollView>
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/zhy5"/>
</LinearLayout>
</RelativeLayout>
more_titile_layout.xml的代码:和上一篇的letter_titile_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">