移动开发作业1——APP门户界面设计

最新推荐文章于 2024-07-10 21:37:49 发布

野生仙女

最新推荐文章于 2024-07-10 21:37:49 发布

阅读量1.2k

点赞数 2

文章标签： java 安卓

本文链接：https://blog.csdn.net/m0_50925472/article/details/120660313

版权

一、项目

https://github.com/zljdgit/MyApplication-test1.git

一、总体介绍

内容：根据课程实操实现APP门户界面框架设计，包含4个table页，能实现table页之间的点击切换；

技术：使用布局（layouts）和分段（fragment），对控件进行点击监听；

二、关键步骤与核心技术

2.1 制作顶部页面

在res.layout包里new一个top.xml文件，来写底部部的linearLayout。顶部的设计比较简单，我们只需要新建一个LinearLayout，插入一个文本框，设置标题，设置背景、文字颜色大小即可。

代码如下

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

    <TextView
        android:id="@+id/textView"
        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="25dp" />
</LinearLayout>

2.2 制作底部页面

在res.layout包里new一个button.xml文件，来写底部部的linearLayout。下面的button分成四块，每块由一个图标和一段文本构成。所以可以用LinearLayout中再包裹一个LinearLayout，被包裹的每个LinearLayout里包含一个ImageView和TextView控件。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:background="@color/black"
        android:orientation="vertical">

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

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

    <LinearLayout
        android:id="@+id/LinearLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:background="@color/black"
        android:orientation="vertical">

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

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="@color/white"
            android:textSize="25dp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:background="@color/black"
        android:orientation="vertical">

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

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="发现"
            android:textColor="@color/white"
            android:textSize="25dp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/black"
        android:gravity="center"
        android:orientation="vertical">

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

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="我"
            android:textColor="@color/white"
            android:textSize="25dp" />

    </LinearLayout>

2.3 制作主页面

activity_main.xml是用"include" 将刚才写的top和button两个组件放到这个activity_main.xml中来，然后中间用FrameLayout标签作为内容区。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <LinearLayout
        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" />

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

        </FrameLayout>

        <include
            layout="@layout/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>


</LinearLayout>

2.4 创建FrameLayout

在java中的包里创建4个FrameLayout，每个对应不同的界面内容。

创建过程：

四个FrameLayout:

FrameLayout类中只保留一个方法：

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_wechat, container, false);
    }

并配置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"
    tools:context=".WechatFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30dp"
        android:gravity="center"
        android:text="这是微信聊天界面" />

</LinearLayout>

在Java文件中初始化Fragment，将四个页面加到fragment中

protected void initFragment() {
        fragmentManager=getFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.id_content,WechatFragment);
        transaction.add(R.id.id_content,Wechat2Fragment);
        transaction.add(R.id.id_content,Wechat3Fragment);
        transaction.add(R.id.id_content,Wechat4Fragment);
        transaction.commit();
    }

2.5被选中的fragment显示

首先声明变量，并初始化Fragment、LinearLayout、ImageView

然后关键在于显示Fragment和隐藏Fragment

点击Fragment：

@Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.LinearLayout1:
                showfragment(1);
                break;
            case R.id.LinearLayout2:
                showfragment(2);
                break;
            case R.id.LinearLayout3:
                showfragment(3);
                break;
            case R.id.LinearLayout4:
                showfragment(4);
                break;
            default:
                break;
        }
    }

隐藏Fragment：

protected void hideFragment(FragmentTransaction transaction) {

        transaction.hide(WechatFragment);
        transaction.hide(Wechat2Fragment);
        transaction.hide(Wechat3Fragment);
        transaction.hide(Wechat4Fragment);

    }

显示Fragment：

private void showfragment(int i) {
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 1:
                transaction.show(WechatFragment);
                break;
            case 2:
                transaction.show(Wechat2Fragment);
                break;
            case 3:
                transaction.show(Wechat3Fragment);
                break;
            case 4:
                transaction.show(Wechat4Fragment);
                break;
            default:
                break;
        }
        transaction.commit();
    }

三、结果展示

点击4个button控件，fragment显示出不同的界面。

四、源码地址

https://github.com/zljdgit/MyApplication-test1.git

野生仙女

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
移动开发作业1——APP门户界面设计

一、项目目录一、项目总体介绍二、关键步骤与核心技术2.1 制作顶部页面2.2 制作底部页面2.3 制作主页面2.4创建FrameLayout2.5被选中的fragment显示三、结果展示四、源码地址https://github.com/zljdgit/MyApplication-test1.git一、总体介绍内容：根据课程实操实现APP门户界面框架设计，包含4个table页，能实现table页之间的点击切换；技术：使用布局（layouts）和分段（f.
复制链接

扫一扫