安卓开发作业一：类微信UI设计
文章目录
- 安卓开发作业一：类微信UI设计
- 1. 实验内容及界面演示
- 1.1 实验内容
- 1.2 实验演示
- 2. 实现过程
- 2.1 制作顶部navagationBar
- 2.2 制作底部Tabbar
- 2.3 main.xml的相关配置
- 2.4 创建FrameLayout
- 2.5 配置MainActivity
- 声明变量
- 初始化Fragment、LinearLayout、ImageView
- 隐藏Fragment
- 选择Fragment
- 恢复图标
- 设置底部tabbar的点击事件
- OnCreate执行以上所写的函数
- 去除标题栏
- 源码仓库
1. 实验内容及界面演示
1.1 实验内容
用AS完成一个类微信界面的UI设计和实现
1.2 实验演示
2. 实现过程
2.1 制作顶部navagationBar
在res.layout包里new一个top.xml文件，来写顶部的linearLayout。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NZ1zfG7J-1617552774265)(类微信UI设计.assets/image-20210404213011760.png)]
top.xml代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/textView0"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/black"
android:gravity="center"
android:text="微信"
android:textColor="@color/white"
android:textSize="30sp" />
</LinearLayout>
属性解释：
-
android:id="@+id/text" 为组件设置一个资源id，在java文件中可以通过
findViewById(id)找到该组件 -
android:layout_width="wrap_content" 布局的宽度，通常不直接写数字，用
wrap_content（组件实际大小），fill_parent或者match_parent填满父容器 -
android:layout_height="wrap_content" 布局的高度，参数同上
-
android:layout_weight="1" 用来等比例地划分区域。最简单的用法为：要等比例划分，分谁，谁为0，weight按比例即可
-
android:background="@color/black" 为组件设置一个背景图片，或者直接用颜色覆盖
-
android:gravity="center" 表示
textView中的文字相对于TextView的对齐方式。 -
android:text="微信" 要显示的文字
-
android:textColor="@color/white" 设置文字的颜色
-
android:textSize="30sp" /> 设置文字的大小
2.2 制作底部Tabbar
在res.layout包里new一个top.xml文件，来写底部部的linearLayout。下面的Tabbar平均分成四块，每块由一个图片和一个文字构成。所以可以用LinearLayout中再包裹一个LinearLayout，被包裹的每个LinearLayout里包含一个ImageButton和TextView控件。
图片可放在res/drawable里
Bottom.xml代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:background="#f9f9f9">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="@+id/imageView1"
android:layout_width="50dp"
android:layout_height="50dp"
app:srcCompat="@drawable/wechat" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="微信"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="@+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
app:srcCompat="@drawable/contacts" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="通讯录" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="@+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
app:srcCompat="@drawable/discovery" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="发现" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="@+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
app:srcCompat="@drawable/me" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="我" />
</LinearLayout>
</LinearLayout>
属性解释：
外部LinearLayout：
-
android:orientation="horizontal" 布局中组件的排列方式，有horizontal（水平）和vertical（垂直）两种方式
内部ImageView：
-
app:srcCompat="@drawable/me"： vector绘制图片的地址
2.3 main.xml的相关配置
main.xml便是将刚才写的navigationBar和tabBar两个组件放到这个main.xml中来，然后中间用FrameLayout标签作为内容区。
main.xml代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/top"
android:layout_width="match_parent"
android:layout_height="wrap_content"></include>
<FrameLayout
android:id="@id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></FrameLayout>
<include layout="@layout/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"></include>
</LinearLayout>
2.4 创建FrameLayout
在java中的包里创建4个FrameLayout（因为tabbar有四个，每个对应不同的内容）
下面以第一栏——“微信”拦为例子
在生成的FrameLayout类中只保留以下方法
JAVA@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_we_chat, container, false);
}
配置fragment_wechat：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WechatFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/wechat_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="这是微信拦的内容"
android:textSize="30sp"
android:gravity="center"
android:layout_gravity="center"
android:textColor="@color/black"/>
</FrameLayout>
2.5 配置MainActivity
声明变量
private final Fragment weChat = new WechatFragment();
private final Fragment contacts = new ContactsFragment();
private final Fragment discovery = new DiscoveryFragment();
private final Fragment me = new MeFragment();
private final FragmentManager manager = getSupportFragmentManager();
private ImageView imgWechat;
private ImageView imgContacts;
private ImageView imgDiscovery;
private ImageView imgMe;
private LinearLayout llWechat;
private LinearLayout llContacts;
private LinearLayout llDiscovery;
private LinearLayout llMe;
变量说明：
Fragment：对应创建的FragmentFragmentManager：管理Fragment的类ImageView：对应之前创建的ImageViewLinearLayout：对应之前创建的LinearLayout
初始化Fragment、LinearLayout、ImageView
通过FragmentManager类来开启Fragment事务，将FragmentXML和main.xml中的Fragment关联起来。
private void intiFragment(){
FragmentTransaction transaction = manager.beginTransaction();
transaction.add(R.id.content, weChat);
transaction.add(R.id.content, contacts);
transaction.add(R.id.content, discovery);
transaction.add(R.id.content, me);
transaction.commit();
}
private void initView(){
llWechat = findViewById(R.id.ll_wechat);
llContacts = findViewById(R.id.ll_contacts);
llDiscovery = findViewById(R.id.ll_discovery);
llMe = findViewById(R.id.ll_me);
imgWechat = findViewById(R.id.img_wechat);
imgContacts = findViewById(R.id.img_contacts);
imgDiscovery = findViewById(R.id.img_discovery);
imgMe = findViewById(R.id.img_me);
}
隐藏Fragment
private void hideFragment(FragmentTransaction transaction){
transaction.hide(weChat);
transaction.hide(mailList);
transaction.hide(find);
transaction.hide(me);
}
选择Fragment
private void selectFragment(int i){
FragmentTransaction transaction = manager.beginTransaction();
// 隐藏Fragment
hideFragment(transaction);
switch (i){
case 0:
transaction.show(weChat);
// 设置点击时显示状态(图标)
imgWechat.setImageResource(R.drawable.Wechat_clicked);
break;
case 1:
transaction.show(contacts);
imgContacts.setImageResource(R.drawable.Contacts_clicked);
break;
case 2:
transaction.show(discovery);
imgDiscovery.setImageResource(R.drawable.Discovery_clicked);
break;
case 3:
transaction.show(me);
imgMe.setImageResource(R.drawable.Me_clicked);
break;
default:
break;
}
transaction.commit();
}
FragmentManager相关详解：Fragment篇——FragmentManager分析及用例
恢复图标
private void resetImg(){
imgWechat.setImageResource(R.drawable.Wechat);
imgContacts.setImageResource(R.drawable.Contacts);
imgDiscovery.setImageResource(R.drawable.Discovery);
imgMe.setImageResource(R.drawable.Me);
}
设置底部tabbar的点击事件
要设置点击时间，需要将MainActivity实现View.OnClickListener接口
public class MainActivity extends AppCompatActivity implements View.OnClickListener{......}
@Override
public void onClick(View v) {
resetImg();
switch (v.getId()){
case R.id.ll_wechat:
selectFragment(0);
break;
case R.id.ll_contacts:
selectFragment(1);
break;
case R.id.ll_discovery:
selectFragment(2);
break;
case R.id.ll_me:
selectFragment(3);
break;
}
}
/**
* 设置监听范围
*/
private void eventRange(){
llWechat.setOnClickListener(this);
llContacts.setOnClickListener(this);
llDiscovery.setOnClickListener(this);
llMe.setOnClickListener(this);
}
OnCreate执行以上所写的函数
创建MainActivity，即执行OnCreate函数时执行初始化、监听等函数
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_main);
intiFragment();
initView();
eventRange();
selectFragment(0);
}
结果会发现头部还有一个标题栏，如下图：
去除标题栏
在OnCreate()函数中调用supportRequestWindowFeature(Window.FEATURE_NO_TITLE);（注意要写在setContentVire()函数的前面，否则会报错）
源码仓库
码云仓库地址：https://gitee.com/xiaolong2612/android_MyWeChat
