AS第一次作业:实现APP门户界面框架设计

Posted 人多吃冰棍

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AS第一次作业:实现APP门户界面框架设计相关的知识,希望对你有一定的参考价值。

目录

APP界面效果展示:

 实现过程:

一、基本框架实现:

1.顶部top.xml:

 2.底部bottom.xml:

3.总框架activity_main.xml:

 二、点击切换动作的实现:

1.fragmentManager标准化

2.tag页面的显示、隐藏、点击切换

三、对外观结构的调整

1.点击切换图标和文本颜色

2.APP初始界面优化

结语 

 项目源代码地址:


本次作业的内容为:根据课程实操实现APP门户界面框架设计,至少包含4个tab页,能实现tab页之间的点击切换;

技术:使用布局(layouts)和分段(fragment),对控件进行点击监听。

APP界面效果展示:

 

 实现过程:

注:所有定义以及相关赋值可在文章最后查看项目源码或点此链接查看(包括文中提到的onCreate函数)。

一、基本框架实现:

观察APP实现后的效果图,可见基本框架可分为三个部分:顶部title,中部的FrameLayout,底部的四个点击切换动作。

可知需要七个layout文件才能将完整的界面显示,分别为:顶部,底部,中部四个tag,以及一个总框架。中部四个tag会在后面点击切换部分展示,这里先看其他三个部分,可按以下顺序依次实现。

1.顶部top.xml:

顶部较为简单,只需一个TextView即可,最外层为一个水平的LinearLayout布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="@color/black"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Wangkai Wechat"
        android:textColor="@color/white"
        android:textSize="30sp" />
</LinearLayout>

 2.底部bottom.xml:

 底部四个点击切换动作每个都需要一个ImageView和一个TextView,并且两个控件要被包含在同一个LinearLayout之中,最后四个LinearLayout的外层使用水平的LinearLayout布局。以下为其中一个LinearLayout的代码(其余三个替换图片和文字即可):

<LinearLayout
        android:id="@+id/LinearLayout_wechat"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/wechat2" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="25sp" />
</LinearLayout>

3.总框架activity_main.xml:

再创建一个Layout文件,使用垂直布局的LinearLayout,添加一个FrameLayout,设置其height=“0dp”、weight=“1”;将top和bottom的布局include进来,并放在FrameLayout的上下两边。这样基本的界面框架就做了出来。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <include layout="@layout/top" />
    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </FrameLayout>
    <include layout="@layout/bottom" />

</LinearLayout>

基本框架效果图:

 

 二、点击切换动作的实现:

要想实现点击切换的效果,需要设置一个FragmentManager来对四个不同的tab进行控制,让他们叠加在一起的同时,实现在不同的点击动作发生时进行一个tab的显示及其余三个的隐藏。

1.fragmentManager标准化

首先定义一个FragmentManager的变量并写一个函数进行fragmentManager的标准化:

private FragmentManager fragmentManager;

private void initFragment(){
    fragmentManager=getFragmentManager();
    FragmentTransaction transaction=fragmentManager.beginTransaction();  //开始交互控制
    transaction.add(R.id.id_content,wechatFragment);  //把fragment加入到id_content
    transaction.add(R.id.id_content,friendFragment);
    transaction.add(R.id.id_content,contactFragment);
    transaction.add(R.id.id_content,configFragment);
    transaction.commit();
}

这里的transaction.add()函数的参数需要一个int类型和一个fragment类型,意为将把fragment加入到一个FrameLayout里,int值为FrameLayout的id。

根据本界面的框架,可知需要4个这样的fragment,那么就需要创建四个这样的Fragment类,比如第一个微信界面的类可以这样写:

package com.example.mywork;
import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class wechatFragment extends Fragment {
    public wechatFragment() {
        // Required empty public constructor
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        // 压缩器,把xml文件压缩到容器中
        return inflater.inflate(R.layout.fragment_wechat, container, false);
    }
}

这里用到了Inflater,可以将xml文件压缩到容器中,第一个参数就是一个Layout参数。前面讲了,我们需要四个tag页面,也就是四个Layout来实现中间部分,我们需要将四个fragment做出对应的Layout页面,这是上面微信界面fragment的Layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="这是微信聊天界面"
        android:textSize="30dp"
        android:gravity="center"/>
</LinearLayout>

在写完这些后,由于Java自导包的问题会导致报错,只需将import的包中与Fragment、FragmentManager、FragmentTransaction相关的包改为以下内容即可修复:

import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;

将四个fragment和Layout写好之后,fragmentManager标准化也完成了,接下来就需要实现四个tag页面的显示、隐藏,以及点击动作的实现。

2.tag页面的显示、隐藏、点击切换

tag的显示与隐藏较好实现,使用函数即可(在show之前隐藏其他tag页面,这样就可做到点哪一个只显示哪一个,其余隐藏):

//tag页面的隐藏
private void hideFragment(FragmentTransaction transaction){
    transaction.hide(wechatFragment);
    transaction.hide(friendFragment);
    transaction.hide(contactFragment);
    transaction.hide(configFragment);
}
//tag页面的显示
private void showfragment(int i) {
    FragmentTransaction transaction=fragmentManager.beginTransaction();
    hideFragment(transaction);
    switch (i){
        case 0:
            transaction.show(wechatFragment);
            break;
        case 1:
            transaction.show(friendFragment);
            break;
        case 2:
            transaction.show(contactFragment);
            break;
        case 3:
            transaction.show(configFragment);
            break;
        default:
            break;
    }
    transaction.commit();
}

现在只差对控件的点击监听了,各个LinearLayout的监听放在了onCreate函数中。这里用到了Onclick(),使用switch语句即可实现通过点击获得不同Layout的id来显示不同tag页面,如下:

@Override
public void onClick(View v) {
    switch (v.getId()){
        case R.id.LinearLayout_wechat:
            showfragment(0);
            break;
        case R.id.LinearLayout_friend:
            showfragment(1);
            break;
        case R.id.LinearLayout_contact:
            showfragment(2);
            break;
        case R.id.LinearLayout_config:
            showfragment(3);
            break;
        default:
            break;
    }
}

要注意的是,使用了Onclick()会有报错的情况,需要将主函数的函数头更改:

public class MainActivity extends AppCompatActivity{}
改为:
public class MainActivity extends AppCompatActivity implements View.OnClickListener{}

做完这些,已经基本实现了此APP的功能,接下来做的就是对界面外观的一些调整了。

三、对外观结构的调整

1.点击切换图标和文本颜色

运行程序会发现,没有细节的处理会让使用起来很不舒服,在我们使用的微信中,点击切换时会发现底部的图标和字体颜色是会改变的,我这里使用的方法是找到下面四个图标的另一组不同颜色的图,如下图所示:

 

写一个函数,使用imageView.setImageResource和textView.setTextColor先把图片设置为灰色的并把文本设置为白色,然后再通过点击动作传入一个Layout的id选择相应的Layout进行图片的改变以及文本颜色设置(imageView1/2/3/4,textView1/2/3/4定义在onCreate中):

private void changeColor(int i){
    imageView1.setImageResource(R.drawable.wechat2);
    imageView2.setImageResource(R.drawable.friend2);
    imageView3.setImageResource(R.drawable.contact2);
    imageView4.setImageResource(R.drawable.config2);
    textView1.setTextColor(Color.rgb(255, 255, 255));
    textView2.setTextColor(Color.rgb(255, 255, 255));
    textView3.setTextColor(Color.rgb(255, 255, 255));
    textView4.setTextColor(Color.rgb(255, 255, 255));
    switch (i){
        case 0:
            imageView1.setImageResource(R.drawable.wechat1);
            textView1.setTextColor(Color.rgb(26,250,41));
            break;
        case 1:
            imageView2.setImageResource(R.drawable.friend1);
            textView2.setTextColor(Color.rgb(26,250,41));
            break;
        case 2:
            imageView3.setImageResource(R.drawable.contact1);
            textView3.setTextColor(Color.rgb(26,250,41));
            break;
        case 3:
            imageView4.setImageResource(R.drawable.config1);
            textView4.setTextColor(Color.rgb(26,250,41));
            break;
        default:
            break;
    }
}

这样的话,Onclick()也需要加上这个点击颜色变化的函数,即:

@Override
public void onClick(View v) {
    switch (v.getId()){
        case R.id.LinearLayout_wechat:
            changeColor(0);
            showfragment(0);
            break;
        case R.id.LinearLayout_friend:
            changeColor(1);
            showfragment(1);
            break;
        case R.id.LinearLayout_contact:
            changeColor(2);
            showfragment(2);
            break;
        case R.id.LinearLayout_config:
            changeColor(3);
            showfragment(3);
            break;
        default:
            break;
    }
}

这样就实现了点击切换图标和文本的颜色,效果图见文章开始的效果展示。

2.APP初始界面优化

使用以上的代码直接运行APP后,不进行任何操作的话中部四个tag页面会叠加在一起,类似于以下效果:

 可以在初始化FragmentManager时,在提交前加上将四个tag隐藏的函数,即可实现APP初始界面为空白页,或者直接使用changeColor()和showfragment()函数,将其中一个tag显示:

private void initFragment(){
    fragmentManager=getFragmentManager();
    FragmentTransaction transaction=fragmentManager.beginTransaction();  //开始交互控制
    transaction.add(R.id.id_content,wechatFragment);  //把fragment加入到id_content
    transaction.add(R.id.id_content,friendFragment);
    transaction.add(R.id.id_content,contactFragment);
    transaction.add(R.id.id_content,configFragment);
    //隐藏4个tag
    hideFragment(transaction); 
    //或者  changeColor(0);showfragment(0); 显示微信聊天页面
    transaction.commit();
}
隐藏4个tag(左)、显示其中一个tag(右)

结语 

本次作业大部分由老师指导完成,确实刚开始需要一段时间的学习,这次自己只独立完成了后面的外观结构调整部分,希望以后能自己独立完成更多内容。

 项目源代码地址:

 wk-WeChat: AS移动微信界面 (gitee.com)

以上是关于AS第一次作业:实现APP门户界面框架设计的主要内容,如果未能解决你的问题,请参考以下文章

as微信界面设计

APP门户界面设计

安卓移动技术开发——类微信界面设计

Android初学之仿微信APP门户界面设计

软件工程网络15个人作业3——案例分析

第四次团队作业:社团申请App