安卓开发作业一：类微信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代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/textView0"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid: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代码如下：

<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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:layout_weight="1"android:gravity="center"><ImageViewandroid:id="@+id/imageView1"android:layout_width="50dp"android:layout_height="50dp"app:srcCompat="@drawable/wechat" /><TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="微信"android:gravity="center"/>LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:layout_weight="1"android:gravity="center"><ImageViewandroid:id="@+id/imageView2"android:layout_width="50dp"android:layout_height="50dp"app:srcCompat="@drawable/contacts" /><TextViewandroid:id="@+id/textView2"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="通讯录" />LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:layout_weight="1"android:gravity="center"><ImageViewandroid:id="@+id/imageView3"android:layout_width="50dp"android:layout_height="50dp"app:srcCompat="@drawable/discovery" /><TextViewandroid:id="@+id/textView3"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="发现" />LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:layout_weight="1"android:gravity="center"><ImageViewandroid:id="@+id/imageView4"android:layout_width="50dp"android:layout_height="50dp"app:srcCompat="@drawable/me" /><TextViewandroid: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代码如下：

<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><FrameLayoutandroid: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@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_we_chat, container, false);}

配置fragment_wechat：

<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"><TextViewandroid: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：对应创建的Fragment
• FragmentManager：管理Fragment的类
• ImageView：对应之前创建的ImageView
• LinearLayout：对应之前创建的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();// 隐藏FragmenthideFragment(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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！