微信|APP门户界面设计 java|android

APP门户界面设计
AS开发作业一：APP门户界面设计

APP门户界面设计
目录
前言
一、实验内容与界面展示
- 1. 实验内容与技术
- 2. 界面展示
二、实现过程
- 1. 制作底部按钮文件bottom.xml
- 2. 制作顶部文件top.xml
- 3. activity_main.xml文件的相关配置添加
- 4. 创建Fragment类
- 5. 配置MainActivity.java文件
- - 5.1 声明变量
  - 5.2 功能实现——点击监听
  - 5.3 功能实现——界面切换
  - 5.4 功能实现——按钮变化
  - 5.6 OnCreate执行上面所写函数方法实现具体功能
三、源码仓库
总结

目录前言这是AS开发APP门户界面（类微信界面）的一个实验记录博客，如果博客中有内容描述错误或者代码有误，欢迎批评和指正。
提示：以下是本篇文章正文内容。
一、实验内容与界面展示 1. 实验内容与技术 1、内容:请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换;
2、技术:使用布局(layouts）和分段(fragment)，对控件进行点击监听;
2. 界面展示

文章图片

二、实现过程先来设计我们的页面，主页面分为三个部分，顶部（top）、内容（content）、底部（bottom）。顶部和底部可以用基本的LinearLayout进行线性布局。
1. 制作底部按钮文件bottom.xml 在res.layout包里new一个bottom.xml文件，来写底部的linearLayout。bottom平均分成四块，每块由一个图片和一个文字构成。所以可以用水平的LinearLayout中再包裹一个竖直的LinearLayout，被包裹的每个LinearLayout里包含一个ImageButton和TextView控件。图片可放在res/drawable里。
bottom.xml代码如下：

属性解释：
外部LinearLayout：

android:orientation=“horizontal”
布局中组件的排列方式，有horizontal（水平）和vertical（垂直）两种方式

内部ImageView：

tools:srcCompat="@drawable/tab_weixin_normal"
vector绘制图片的地址

在执行时，只出现图标对应的文字而不出现图标的原因是，项目在打包的时候它只会打包Android引用的，所以，图片的引用可以再写一个Android：src=https://www.it610.com/article/“图片地址”。对原调用进行覆盖。

2. 制作顶部文件top.xml 在res.layout包里new一个top.xml文件，在其顶部的linearLayout中写一个TextView。
top.xml代码如下：

属性解释：

android:id="@+id/textView2"
为组件设置一个资源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/teal_700"
为组件设置一个背景图片，或者直接用颜色覆盖，颜色有很多种，本博客实验选用的水蓝绿色。

android:gravity=“center”
表示textView中的文字相对于TextView的对齐方式。

android:text=“微信”
要显示的文字

android:textColor="@color/white"
设置文字的颜色

android:textSize=“30sp” />
设置文字的大小

3. activity_main.xml文件的相关配置添加 activity_main.xml是app运行后显示的主页面，所以配置该文件，就是对主页面显示的内容布局。整个主页面使用竖直的LinerLayout，将top.xml和bottom.xml导入进来就好了，当然还有中间内容content，content是应对Fragment，所以要使用FrameLayout作为容器。
activity_main.xml代码如下：

主页面设计的图片：

文章图片

4. 创建Fragment类在java中的包里创建4个Fragment类，重写其中的onCreateView方法返回我们之前设计好的相应的视图（因为tabbar有四个，每个对应不同的内容）
下面以第一栏——“微信”拦为例子

在app/com.example.wechart目录下新建Fragment（blank）类，并根据情况创建四个，并分别命名为bottom.xml对应四个按钮的名称。

文章图片

并在res/layout目录下创建四个对应名称的Layout XML File。

文章图片

在每个生成的Fragment类中只保留以下方法。（以weixinFragment.java为例）

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_wechat.xml：

5. 配置MainActivity.java文件接下来就到我们最后的部分啦，在MainActivity中“显示”我们的写的布局页面，实现我们的功能：点击监听、界面切换、按钮变化。
5.1 声明变量

private Fragment weixinFragment=new weixinFragment(); private Fragment tongxunluFragment=new tongxunluFragment(); private Fragment faxianFragment=new faxianFragment(); private Fragment shezhiFragment=new shezhiFragment(); private FragmentManager fragmentManager; private View LinearLayout1,LinearLayout2,LinearLayout3,LinearLayout4; private ImageView imageWeixin,imagetongxunlu,imagefaxian,imageshezhi; private TextView textView;

变量说明：
Fragment：对应创建的Fragment
FragmentManager：管理Fragment的类
ImageView：对应之前创建的ImageView
LinearLayout：对应之前创建的LinearLayout

5.2 功能实现——点击监听
【微信|APP门户界面设计】实现View.OnClickListener接口中onClick(View v)方法。

要设置点击时间，需要将MainActivity实现View.OnClickListener接口
public class MainActivity extends AppCompatActivity implements View.OnClickListener{…}

/** * 设置监听范围 */ LinearLayout1.setOnClickListener(this); LinearLayout2.setOnClickListener(this); LinearLayout3.setOnClickListener(this); LinearLayout4.setOnClickListener(this); @Override public void onClick(View v) {resetImage(); switch (v.getId()){case R.id.tab_weixin: showfragment(0); break; case R.id.tab_tongxunlu: showfragment(1); break; case R.id.tab_faxian: showfragment(2); break; case R.id.tab_shezhi: showfragment(3); break; default: break; }}

5.3 功能实现——界面切换
我们需要借助FragmentManager对Fragment进行管理，用FragmentTransaction管理Fragment所有的展示交互以及回滚事件。我们要先将所有的Fragment添加进去：

private void initFragment(){fragmentManager=getFragmentManager(); FragmentTransaction transaction=fragmentManager.beginTransaction(); transaction.add(R.id.content,weixinFragment); transaction.add(R.id.content,tongxunluFragment); transaction.add(R.id.content,faxianFragment); transaction.add(R.id.content,shezhiFragment); transaction.commit(); }

选择对应按钮后，页面的切换。

private void showfragment(int i){FragmentTransaction transaction=fragmentManager.beginTransaction(); hideFragment(transaction); switch (i){case 0: textView.setText("微信"); transaction.show(weixinFragment); imageWeixin.setImageResource(R.drawable.tab_weixin_pressed); break; case 1: textView.setText("通讯录"); transaction.show(tongxunluFragment); imagetongxunlu.setImageResource(R.drawable.tab_address_pressed); break; case 2: textView.setText("发现"); transaction.show(faxianFragment); imagefaxian.setImageResource(R.drawable.tab_find_frd_pressed); break; case 3: textView.setText("设置"); transaction.show(shezhiFragment); imageshezhi.setImageResource(R.drawable.tab_settings_pressed); break; default: break; } transaction.commit(); }

此时查看app时，会发现所有Fragment都重叠起来，导致错误，因此我们要先将所有Fragment都隐藏，然后选择相应按钮时显示对应Fragment就好啦！

private void hideFragment(FragmentTransaction transaction){transaction.hide(weixinFragment); transaction.hide(tongxunluFragment); transaction.hide(faxianFragment); transaction.hide(shezhiFragment); }

打开该app时，首先先展示的页面。

showfragment(0);

5.4 功能实现——按钮变化
按钮通过设置ImageView的图像来源就能很快实现预期的效果了。

点击后变为另外一个图标（以微信图标为例）。将该方法写入showfragment函数内，当点击微信的时候，展现微信页面的同时，微信图标也变为点击事件发生后的样子。

imageWeixin.setImageResource(R.drawable.tab_weixin_pressed);

在点击另外一个图标时，该微信图标要变回原来的样子。于是写了restImage函数，放入onClick函数里，随着事件的发生，调用该函数，实现按钮的变化。

public void resetImage(){imageWeixin.setImageResource(R.drawable.tab_weixin_normal); imagetongxunlu.setImageResource(R.drawable.tab_address_normal); imagefaxian.setImageResource(R.drawable.tab_find_frd_normal); imageshezhi.setImageResource(R.drawable.tab_settings_normal); }

resetImage();

5.6 OnCreate执行上面所写函数方法实现具体功能
在MainActivity中，执行OnCreate函数时执行初始化、监听等函数。

@Override protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); textView=findViewById(R.id.textView2); LinearLayout1=findViewById(R.id.tab_weixin); LinearLayout2=findViewById(R.id.tab_tongxunlu); LinearLayout3=findViewById(R.id.tab_faxian); LinearLayout4=findViewById(R.id.tab_shezhi); imageWeixin=findViewById(R.id.imageView); imagetongxunlu=findViewById(R.id.imageView1); imagefaxian=findViewById(R.id.imageView2); imageshezhi=findViewById(R.id.imageView3); LinearLayout1.setOnClickListener(this); LinearLayout2.setOnClickListener(this); LinearLayout3.setOnClickListener(this); LinearLayout4.setOnClickListener(this); initFragment(); showfragment(0); }

在OnCreate()函数中调用
supportRequestWindowFeature(Window.FEATURE_NO_TITLE); （注意要写在setContentVire()函数的前面，否则会报错）

三、源码仓库码云仓库地址：https://github.com/Julia-rs-zhu/App_wechart.git
总结刚开始学习移动开发，很感兴趣，感觉很有意思，通过数行代码能实现这些效果，真是件新奇的事情，非常有成就感！不过目前只是刚刚入门而已，还得继续努力鸭！
第一次写博客，发现真的不太容易，希望看博客的朋友们可以多多包含。平时在博客上时经常学习和搜集知识，现在的我有幸有这样的一个机会可以也在博客里分享自己的经验啦~相信在这学期移动开发的学习中，在博客发文累计下，我的文章也可以变得越来越细致且通俗易懂！
写博客对我们这些正在学习的学生来说真的是件很好的事情。实验报告面向的是老师，所以内容更加的专业凝练；但是博客更多地是面向学习者，内容故而更加的通俗细致。所以在写博客的时候，让我们将课上学的模模糊糊的东西，再重现出来的时候，我们又自己学习了一遍巩固了知识，同时又在社区做了一定的奉献。当然里面可能还有不足的地方或者不正确的地方，欢迎大家批评指正，共同进步！
今天就到这里啦，蟹蟹看到这里的盆友！共勉！