移动技术开发 APP门户界面设计

最新推荐文章于 2024-08-02 18:01:21 发布

peanutaasdzz

最新推荐文章于 2024-08-02 18:01:21 发布

阅读量440

点赞数

分类专栏：笔记文章标签：微信 android

本文链接：https://blog.csdn.net/peanutaasdzz/article/details/120659203

版权

Android 布局设计 Fragment 点击监听 Tab页切换

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、APP门户设计要求

1、内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换；
2、技术：使用布局（layouts）和分段（fragment），对控件进行点击监听；

二、UI界面设计

2.1制作顶部图标文件top.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="wrap_content"
    android:background="#000000"

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="32sp" />
</LinearLayout>

top.xml设置效果为：
在微信界面顶部的中间位置设置“微信”中文标识，颜色为白色，背景为黑色背景。
其中xml文件中代码的意义为：
（1）android:layout_width=“wrap_content”
width表示top布局的宽度，用wrap_content（组件实际大小），fill_parent或者match_parent填满父容器；

（2）android:layout_height=“wrap_content”
width表示top布局的高度，用wrap_content（组件实际大小），fill_parent或者match_parent填满父容器；

（3）android:layout_height=“wrap_content”
width表示top布局的高度，用wrap_content（组件实际大小），fill_parent或者match_parent填满父容器；

（4）android:layout_weight=“1”
layout_weight = 1表示平均分配长度无法充满父布局；

（5）android:background="#000000"
background表示为组件设置一个背景颜色，结合现实app，我们采用黑色背景白色文字书写；

（6）android:gravity=“center”
gravity表示textView中的文字相对于TextView的对齐方式，中心对齐；

（7）android:text=“微信”
text表示top中要显示的文字“微信”；

（8）android:textColor="@color/white"
结合（5），我们设置“微信”文字的颜色为白色（背景为黑色）；

2.2制作底部按键文件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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="#2b2b2b"
    android:baselineAligned="false">

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

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/duihua" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"

            android:text="@string/iconText1"
            android:textColor="@color/white"
            android:textSize="16sp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/pengyoufill" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/iconText2"
            android:textColor="@color/white"
            android:textSize="16dp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/tongxunlutianchong" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:backgroundTint="#F44336"
            android:gravity="center"
            android:text="@string/iconText3"
            android:textColor="@color/white"
            android:textSize="16dp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/shezhi" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/iconText4"
            android:textColor="@color/white"
            android:textSize="16dp" />
    </LinearLayout>
</LinearLayout>

其中：
（1）LinearLayout
android:orientation=“horizontal”表示水平排列；
（2）ImageView
表示对内部图片的高度和宽度的处理方式，详见代码说明；

2.3 activity_main.xml 文件的配置

activity_main.xml 文件表示对主页面显示的内容布局。我们要将制作好的top.xml和bottom.xml文件导入进来，除了顶部图像和底部按钮之外，我们还需要写一个中间内容content，content文本表示中间界面的介绍，content是应对Fragment，所以要使用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:layout_weight="1"
    android:baselineAligned="false"
    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>

2.4配置Fragment类（以第一个片段为例）

public class weixinFragment extends Fragment {

    public weixinFragment() {
        // Required empty public constructor
    }

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

以微信界面为例，将Fragment文件底部的函数改成R.layout.fragment_weixin用来将weixin.xml文件与bottom.xml和top.xml连接起来。后面三个按键相类似。

<?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=".BlankFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="@string/content1"
        android:textSize="48sp"
        tools:text="@string/content1" />

</FrameLayout>

2.5控制逻辑部分

1.定义fragment对象

    // 定义四个tab的实例
    private Fragment weixinFragment=new weixinFragment();
    private Fragment tongxunluFragment=new tongxunluFragment();
    private Fragment faxianFragment=new faxianFragment();
    private Fragment shezhiFragment=new shezhiFragment();

2.将四个按键实例放入manager栈中

    // 将四个tab实例，压入到FragmentManager栈中
    private void initFragment() {
        fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(R.id.id_content, weiixn);
        transaction.add(R.id.id_content, tongxunlu);
        transaction.add(R.id.id_content, faxian);
        transaction.add(R.id.id_content, shezhi);
        transaction.commit();

        hideFragment(transaction);
    }

3.隐藏fragment
由于系统界面启动时，我们默认隐藏4个fragment片段

    // 隐藏四个fragment
    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(tab1);
        transaction.hide(tab2);
        transaction.hide(tab3);
        transaction.hide(tab4);
    }

4.存储bottom中4个LinearLayout的对象

    // 声明存储bottom中四个LinearLayout的对象
    private LinearLayout LinearLayout1;
    private LinearLayout LinearLayout2;
    private LinearLayout LinearLayout3;
    private LinearLayout LinearLayout4;

    private TextView text1;
    private TextView text2;
    private TextView text3;
    private TextView text4;

    private ImageView imageWeixin;
    private ImageView imagetongxunlu;
    private ImageView imagefaxian;
    private ImageView imageshezhi;

2.6设置监听

1.初始化监听函数

    // 初始化监听事件
    private void initEvent() {
        LinearLayout1.setOnClickListener(this);
        LinearLayout2.setOnClickListener(this);
        LinearLayout3.setOnClickListener(this);
        LinearLayout4.setOnClickListener(this);
    }

2.重写监听函数

 public void onClick(View v) {
 //用户点击任一按钮时，将所有按钮重置为原来的颜色
        resetImage();
        switch (v.getId()){
            case R.id.tab_weixin:
                setSelect(0);
                break;
            case R.id.tab_tongxunlu:
                setSelect(1);
                break;
            case R.id.tab_faxian:
                setSelect(2);
                break;
            case R.id.tab_shezhi:
                setSelect(3);
                break;
            default:
                break;
        }
    }

3.定义监听函数setSlect

    // 定义监听的处理函数
    private void setSelect(int i){
        FragmentTransaction transaction = fm.beginTransaction();
        // 检测到点击事件，则隐藏所有片段，仅显示用户点击的片段
        hideFragment(transaction);
        switch (i){
            case  0:
                transaction.show(weixinFragment);
                text1.setTextColor(Color.parseColor("#07C160"));
                imageView.setImageResource(R.drawable.duihua2);
                break;
            case  1:
                transaction.show(tongxunluFragment);
                text2.setTextColor(Color.parseColor("#07C160"));
                imageView2.setImageResource(R.drawable.pengyoufill2);
                break;
            case  2:
                transaction.show(faxianFragment);
                text3.setTextColor(Color.parseColor("#07C160"));
                imageView3.setImageResource(R.drawable.tongxunlutianchong2);
                break;
            case  3:
                transaction.show(shezhiFragment);
                text4.setTextColor(Color.parseColor("#07C160"));
                imageView4.setImageResource(R.drawable.shezhi2);
                break;
            default:
                break;
        }
        transaction.commit();
    }

4.定义清空函数

    // 定义将所有图片与文字重置为原来颜色的函数
    public void resetImgText() {
        text1.setTextColor(Color.parseColor("#FFFFFF"));
        text2.setTextColor(Color.parseColor("#FFFFFF"));
        text3.setTextColor(Color.parseColor("#FFFFFF"));
        text4.setTextColor(Color.parseColor("#FFFFFF"));

        imageView.setImageResource(R.drawable.duihua);
        imageView2.setImageResource(R.drawable.pengyoufill);
        imageView3.setImageResource(R.drawable.tongxunlutianchong);
        imageView4.setImageResource(R.drawable.shezhi);
    }

5.调用相关函数

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 取消标题栏
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        // 调用相关函数
        initFragment();
        initView();
        initEvent();
       

    }

三、运行效果

1、打开APP（绿色光标）
微信界面
2、点击按钮显示“发现”界面（绿色光标）
发现界面

四、代码仓库地址

https://gitee.com/qdasdzz/wechat-interface-design.git

peanutaasdzz

关注

0
点赞
踩
3

收藏

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

一、APP门户设计要求1、内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换；2、技术：使用布局（layouts）和分段（fragment），对控件进行点击监听；二、UI界面设计1.制作顶部文件top.xml...
复制链接

扫一扫