AndroidStudio实现微信界面设计 AndroidStudio实现微信界面设计

一、内容
二、技术
三、xml代码
四、Java代码
五、界面展示

【AndroidStudio实现微信界面设计】
一、内容实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换

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

三、xml代码 top.xml

界面居中上方写标题，背景是黑色，字体是白色

文章图片

bottom.xml

界面下方分成四个模板，由图片和文字组成，正在使用的界面图标为绿色，不在使用的界面图标为黑色

文章图片

fragment_config.xml/fragment_wechat/fragment_friend/fragment_contact

显示界面中间内容

文章图片

文章图片

activity_main.xml

将top.xml和bottom.xml放在一个界面中

文章图片

四、Java代码 MainActivity.java

package com.example.cyxapp; import androidx.appcompat.app.AppCompatActivity; import android.app.Fragment; import android.app.FragmentManager; import android.app.FragmentTransaction; import android.graphics.Color; import android.os.Bundle; import android.view.View; import android.widget.LinearLayout; public class MainActivity extends AppCompatActivity implements View.OnClickListener{ private Fragment Fragment_config=new Fragment_config(); private Fragment Fragment_contact=new Fragment_contact(); private Fragment Fragment_wechat=new Fragment_wechat(); private Fragment Fragment_friend=new Fragment_friend(); private FragmentManager fragmentManager; private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4; @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); linearLayout1=findViewById(R.id.linearLayout1); linearLayout2=findViewById(R.id.linearLayout2); linearLayout3=findViewById(R.id.linearLayout3); linearLayout4=findViewById(R.id.linearLayout4); 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.id_content,Fragment_wechat); transaction.add(R.id.id_content,Fragment_contact); transaction.add(R.id.id_content,Fragment_config); transaction.add(R.id.id_content,Fragment_friend); transaction.commit(); } private void hideFragment(FragmentTransaction transaction){transaction.hide(Fragment_wechat); transaction.hide(Fragment_contact); transaction.hide(Fragment_config); transaction.hide(Fragment_friend); }private void background(View v) {switch (v.getId()) {case R.id.linearLayout1:linearLayout1.setBackgroundColor(Color.parseColor("#426F42")); break; case R.id.linearLayout2:linearLayout2.setBackgroundColor(Color.parseColor("#426F42")); break; case R.id.linearLayout3:linearLayout3.setBackgroundColor(Color.parseColor("#426F42")); break; case R.id.linearLayout4:linearLayout4.setBackgroundColor(Color.parseColor("#426F42")); break; default:break; }} private void backgroundreturn(View v) {switch (v.getId()) {case R.id.linearLayout1:linearLayout1.setBackgroundColor(Color.parseColor("#000000")); break; case R.id.linearLayout2:linearLayout2.setBackgroundColor(Color.parseColor("#000000")); break; case R.id.linearLayout3:linearLayout3.setBackgroundColor(Color.parseColor("#000000")); break; case R.id.linearLayout4:linearLayout4.setBackgroundColor(Color.parseColor("#000000")); break; default:break; }} private void showfragmnet(int i) { FragmentTransaction transaction=fragmentManager.beginTransaction(); hideFragment(transaction); switch (i){case 0:transaction.show(Fragment_wechat); background(linearLayout1); backgroundreturn(linearLayout3); backgroundreturn(linearLayout2); backgroundreturn(linearLayout4); break; case 1:transaction.show(Fragment_friend); background(linearLayout2); backgroundreturn(linearLayout4); backgroundreturn(linearLayout1); backgroundreturn(linearLayout3); break; case 2:transaction.show(Fragment_contact); background(linearLayout3); backgroundreturn(linearLayout4); backgroundreturn(linearLayout2); backgroundreturn(linearLayout1); break; case 3:transaction.show(Fragment_config); background(linearLayout4); backgroundreturn(linearLayout1); backgroundreturn(linearLayout2); backgroundreturn(linearLayout3); break; default:break; }transaction.commit(); } @Overridepublic void onClick(View v) {switch (v.getId()){case R.id.linearLayout1:showfragmnet(0); break; case R.id.linearLayout2:showfragmnet(1); break; case R.id.linearLayout3:showfragmnet(2); break; case R.id.linearLayout4:showfragmnet(3); break; default:break; }} }

initFragment函数中利用transaction来实现fragment的切换
hideFragment把没有使用的界面的fragment的内容隐藏起来
background使图标点击后变绿色
backgroundreturn让图标恢复黑色
showfragmnet显示正在使用界面的fragment的内容
onClick监听函数，监听到底是哪一个图标被击中从而显示哪一个界面的内容
Fragment_config.java

package com.example.cyxapp; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Fragment_config extends Fragment { public Fragment_config() {// Required empty public constructor} @Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_config, container, false); }}

Fragment_contact、Fragment_friend、Fragment_wechat类似

五、界面展示