app界面架构是什么意思手机端app界面框架设计

转载

mob6454cc75556b 2023-11-12 13:22:32

文章标签 app界面架构是什么意思 android 微信 ide sed 文章分类 架构后端开发

APP门户框架设计

一、XML文件

顶部文件

1.顶部是界面名称，这里是Wechat.
在res/layout中创建一个名为top的XML文件，之后在code界面向其中添加android:text="@string/app_name"
2.之后为了将其设计成白色字体，在code中添加
android:textColor="#ffffff"
添加
android:background="#000000"

低部文件

1.可将此底端文件视作一个horizontal型的LinearLayout包含有四个vertical型的LinearLayout
2.最外层的LinearLayout将其layout_height设置为100dp，具体多少可以设置之后在视图中查看实际效果，重点是第一个vertical型的LinearLayout的设置，这里有三个比较关键的参数，分别是
android:layout_width=“0dp”
android:gravity=“center”
android:layout_weight=“1”
3.这样的三个参数设置好之后，之后在添加后续的vertical型的LinearLayout时，会发现所有的vertical型的LinearLayout会平分横向的空间，框架就设计好了，之后是给其添加字体颜色与图片，背景颜色等，图片的设置方式是@+此项目中的某文件夹名/文件名。
底端的XML文件编写完成。

中间部分文件

1.由于这个类微信的界面有四个不同的中间部分文件，需要分别编写。
android:layout_width=“wrap_content”
android:layout_height=“match_parent”
android:gravity=“center”
android:layout_weight=“1”

activity_main.xml文件

此文件的目的是将此前编写的上中下三个部分进行整合
分别添加
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:text=“Hello World!”
app:layout_constraintBottom_toBottomOf=“parent”
app:layout_constraintLeft_toLeftOf=“parent”
app:layout_constraintRight_toRightOf=“parent”
app:layout_constraintTop_toTopOf=“parent” />

二、JAVA文件

首先根据这个项目的结构可以知道大致要编写5个Java文件，分别是MainActivity和四个界面的实现

界面实现的文件：fragment文件

Fragment是一种可以嵌入在活动中的UI片段，能够让程序更加合理和充分地利用大屏幕的空间，出现的初衷是为了适应大屏幕的平板电脑，可以将其看成一个小型Activity，又称作Activity片段。
在其return中写入要输出的界面文件名，四个文件是相似的。

主文件编写

1.首先，我们需要将4个页面放到Framelayout中，为此，需要编写一个initfragment()函数
private void initFragment(){
fm =getFragmentManager();
FragmentTransaction transaction=fm.beginTransaction();
transaction.add(R.id.id_content,mtab01);
transaction.add(R.id.id_content,mtab02);
transaction.add(R.id.id_content,mtab03);
transaction.add(R.id.id_content,mtab04);
transaction.commit();
}
2.下一个我们需要做的是将button与图片联系起来，因为监听是通过button来的，这个函数要实现的功能就是通过点击图片完成监听，代码如下
private void setselect(int i){
FragmentTransaction transaction=fm.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(mtab01);
mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.show(mtab02);
mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
transaction.show(mtab03);
mImgContact.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.show(mtab04);
mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
transaction.commit();
}
其功能是通过点击之后调出相应的图片来实现
4.由于四个页面都在fragment中，如果不隐藏会造成显示内容的重叠，因此我们的解决思路是在显示一个界面之前将所有的界面都hide，点击对应的button之后再把对应的页面显示出来，所以需要一个hide功能的函数，实现如下：
private void hidefragment(FragmentTransaction transaction){
transaction.hide(mTab01);
transaction.hide(mTab02);
transaction.hide(mTab03);
transaction.hide(mTab04);
transaction.commit();
}
5.监听函数
public void onClick(View v){
resetimg();
switch (v.getId()){
case R.id.id_tab_weixin_img:
selectfragment(0);
break;
case R.id.id_tab_fri_img:
selectfragment(1);
break;
case R.id.id_tab_contact_img:
selectfragment(2);
break;
case R.id.id_tab_setting_img:
selectfragment(3);
break;
default:
break;
}
它通过获取到指定页面的id来实现监听
6.调用灰色的图片，以让点击过后的图片回复原色
这个函数功能是调出指定图片的位置
private void resetimg(){
mImgWeiXin.setImageResource(R.drawable.tab_weixin_normal);
mImgFri.setImageResource(R.drawable.tab_find_frd_normal);
mImgContact.setImageResource(R.drawable.tab_address_normal);
mImgSetting.setImageResource(R.drawable.tab_settings_normal);
}
最后的onCreate函数如下：
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initFragment();
initView();
selectfragment(0);
initEvent();
}