微信门户界面设计
一、功能要求
实现微信门户界面设计。主要展现为四个界面(微信、联系人、发现、设置)可切换的形式。点击界面下方图片文字进行切换,切换到该页面时,相应页面下面图标变亮,字体变色。主要使用布局(layouts)和分段(fragment)。
整个主要分为三块:顶部,底部,中部(中部有四个fragment构成,实现不同界面展示)。
我设计的大致界面:
二、代码
首先是.mxl文件编写,包括top、bottom、四个fragment、activity_main。
调试界面展示出来的效果。
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="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:text="我的微信"
android:background="@color/black"
android:textColor="@color/white"
android:gravity="center"
android:textSize="30sp" />
</LinearLayout>
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="100sp">
<LinearLayout
android:id="@+id/LinerLayout_weixin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="35dp"
app:srcCompat="@android:drawable/btn_star_big_off"
tools:srcCompat="@drawable/imp1" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="15dp"
android:gravity="center"
android:text="微信"
android:textColor="@color/black" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinerLayout_friend"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="35dp"
app:srcCompat="@android:drawable/ic_menu_call"
tools:srcCompat="@drawable/imp3" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="15dp"
android:gravity="center"
android:text="联系人"
android:textColor="@color/black" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinerLayout_contact"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView3"
android:layout_width="match_parent"
android:layout_height="35dp"
app:srcCompat="@android:drawable/btn_star_big_off"
tools:srcCompat="@drawable/imp1" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="15dp"
android:gravity="center"
android:text="发现"
android:textColor="@color/black" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinerLayout_config"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView4"
android:layout_width="match_parent"
android:layout_height="35dp"
app:srcCompat="@android:drawable/ic_menu_call"
tools:srcCompat="@drawable/imp3" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:text="设置"
android:textColor="@color/black" />
</LinearLayout>
</LinearLayout>
fragment_weixin.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/weixin"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="这是微信界面"
android:textColor="@color/black"
android:textSize="50sp" />
</FrameLayout>
fragment_friend.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/friend"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView6"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="这是联系人界面"
android:textColor="@color/black"
android:textSize="50sp" />
</FrameLayout>
fragment_contact.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/contact"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView7"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="这是发现界面"
android:textColor="@color/black"
android:textSize="50sp" />
</FrameLayout>
fragment_config.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/config"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView8"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="这是设置界面"
android:textColor="@color/black"
android:textSize="50sp" />
</FrameLayout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<include
android:id="@+id/include"
layout="@layout/top"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:id="@+id/content"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/include2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/include"
app:layout_constraintVertical_bias="0.0">
</FrameLayout>
<include
android:id="@+id/include2"
layout="@layout/bottom"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/content" />
</androidx.constraintlayout.widget.ConstraintLayout>
然后是.java文件的编写
weixinFragment.java、friendFragment.java、contactFragment.java、configFragment.java类似(以weixinFragment.java为例)
package com.example.myapplication1;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.app.Fragment;
public class weixinFragment extends Fragment {
public weixinFragment(){
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
return inflater.inflate(R.layout.fragment_weixin,container,false);
}
}
MainActivity.java部分实现了界面切换、下标变化、文字变化等功能。
package com.example.myapplication1;
import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Fragment weixinFragment=new weixinFragment();
private Fragment friendFragment=new friendFragment();
private Fragment contactFragment=new contactFragment();
private Fragment configFragment=new configFragment();
private TextView textView1;
private TextView textView2;
private TextView textView3;
private TextView textView4;
private ImageView imageView1;
private ImageView imageView2;
private ImageView imageView3;
private ImageView imageView4;
private FragmentManager fragmentManager;
private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
linearLayout1=findViewById(R.id.LinerLayout_weixin);
linearLayout2=findViewById(R.id.LinerLayout_friend);
linearLayout3=findViewById(R.id.LinerLayout_contact);
linearLayout4=findViewById(R.id.LinerLayout_config);
textView1=findViewById(R.id.textView1);
textView2=findViewById(R.id.textView2);
textView3=findViewById(R.id.textView3);
textView4=findViewById(R.id.textView4);
imageView1=findViewById(R.id.imageView1);
imageView2=findViewById(R.id.imageView2);
imageView3=findViewById(R.id.imageView3);
imageView4=findViewById(R.id.imageView4);
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
initFragment();
}
private void initFragment(){
fragmentManager=getFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction();
transaction.add(R.id.content,weixinFragment);
transaction.add(R.id.content,friendFragment);
transaction.add(R.id.content,contactFragment);
transaction.add(R.id.content,configFragment);
transaction.commit();
}
private void hideFragment(FragmentTransaction transaction){
transaction.hide(weixinFragment);
transaction.hide(friendFragment);
transaction.hide(contactFragment);
transaction.hide(configFragment);
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.LinerLayout_weixin:
selectFragment(0);
break;
case R.id.LinerLayout_friend:
selectFragment(1);
break;
case R.id.LinerLayout_contact:
selectFragment(2);
break;
case R.id.LinerLayout_config:
selectFragment(3);
break;
default:
break;
}
}
private void ChangeBottom(){
textView1.setTextColor(Color.BLACK);
imageView1.setImageResource(R.drawable.imp1);
textView2.setTextColor(Color.BLACK);
imageView2.setImageResource(R.drawable.imp3);
textView3.setTextColor(Color.BLACK);
imageView3.setImageResource(R.drawable.imp5);
textView4.setTextColor(Color.BLACK);
imageView4.setImageResource(R.drawable.imp7);
}
private void selectFragment(int i){
FragmentTransaction transaction=fragmentManager.beginTransaction();
hideFragment(transaction);
ChangeBottom();
switch (i){
case 0:
transaction.show(weixinFragment);
textView1.setTextColor(Color.GREEN);
imageView1.setImageResource(R.drawable.imp2);
break;
case 1:
transaction.show(friendFragment);
textView2.setTextColor(Color.GREEN);
imageView2.setImageResource(R.drawable.imp4);
break;
case 2:
transaction.show(contactFragment);
textView3.setTextColor(Color.GREEN);
imageView3.setImageResource(R.drawable.imp6);
break;
case 3:
transaction.show(configFragment);
textView4.setTextColor(Color.GREEN);
imageView4.setImageResource(R.drawable.imp8);
break;
default:
break;
}
transaction.commit();
}
}
三、底部图标文字变化部分
我主要通过图片的切换来实现图标变亮、变灰这一过程,通过改变文字的颜色(黑色、绿色转变)来实现文字变亮、变灰的效果。
主要代码为以下部分:
private void ChangeBottom(){
textView1.setTextColor(Color.BLACK);
imageView1.setImageResource(R.drawable.imp1);
textView2.setTextColor(Color.BLACK);
imageView2.setImageResource(R.drawable.imp3);
textView3.setTextColor(Color.BLACK);
imageView3.setImageResource(R.drawable.imp5);
textView4.setTextColor(Color.BLACK);
imageView4.setImageResource(R.drawable.imp7);
}
private void selectFragment(int i){
FragmentTransaction transaction=fragmentManager.beginTransaction();
hideFragment(transaction);
ChangeBottom();
switch (i){
case 0:
transaction.show(weixinFragment);
textView1.setTextColor(Color.GREEN);
imageView1.setImageResource(R.drawable.imp2);
break;
case 1:
transaction.show(friendFragment);
textView2.setTextColor(Color.GREEN);
imageView2.setImageResource(R.drawable.imp4);
break;
case 2:
transaction.show(contactFragment);
textView3.setTextColor(Color.GREEN);
imageView3.setImageResource(R.drawable.imp6);
break;
case 3:
transaction.show(configFragment);
textView4.setTextColor(Color.GREEN);
imageView4.setImageResource(R.drawable.imp8);
break;
default:
break;
}
transaction.commit();
}
四、结果展示
以下展示了微信和设置页面。
五、仓库地址
https://gitee.com/muxinji/windows.git