目录
一、编写微信头部。
二、编写微信底部。
三、编写四个内容区。
四、编写MainActivity和activity_main.xml文件。
项目结构:
创建layout_head.xml文件,使用LinearLayout布局。
创建layout_bottom.xml文件,外层使用LinearLayout垂直布局,内层使用LinearLayout水平布局,内嵌四个导行按钮,分别对应聊天,联系人,发现和个人中心界面。
创建四个Fragment类和对应的XML文件分别表示聊天,联系人,发现和个人中心界面。
四个文件类似,在这里只展示一个聊天界面:
ChatFragment:
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class ChatFragment extends Fragment {
public ChatFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_chat, container, false);
}
}
fragment_chat.xml:
activity_main.xml中间部分使用FrameLayout布局填充四个内容区fragment:
MainActivity:
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;
import androidx.fragment.app.FragmentManager;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private FragmentManager fm = getSupportFragmentManager();
private LinearLayout linearLayout1, linearLayout2, linearLayout3, linearLayout4;
private ImageView imageView1,imageView2,imageView3,imageView4;
private Fragment chat = new ChatFragment();
private Fragment people = new PeopleFragment();
private Fragment find = new FindFragment();
private Fragment personal = new PersonalFragment();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initFragment();
initImageView();
showFragment(0);
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
}
private void initFragment() {
FragmentTransaction transaction = fm.beginTransaction();
transaction.add(R.id.fragment_content, chat);
transaction.add(R.id.fragment_content, people);
transaction.add(R.id.fragment_content, find);
transaction.add(R.id.fragment_content, personal);
transaction.commit();
}
private void initImageView() {
imageView1 = findViewById(R.id.imageView1);
imageView2 = findViewById(R.id.imageView2);
imageView3 = findViewById(R.id.imageView3);
imageView4 = findViewById(R.id.imageView4);
linearLayout1 = findViewById(R.id.layout1);
linearLayout2 = findViewById(R.id.layout2);
linearLayout3 = findViewById(R.id.layout3);
linearLayout4 = findViewById(R.id.layout4);
}
private void hideFragment(FragmentTransaction transaction) {
transaction.hide(chat);
transaction.hide(people);
transaction.hide(find);
transaction.hide(personal);
}
@Override
public void onClick(View view) {
FragmentTransaction fragmentTransaction = fm.beginTransaction();
hideFragment(fragmentTransaction);
resetImg();
switch (view.getId()) {
case R.id.layout1:
showFragment(0);
break;
case R.id.layout2:
showFragment(1);
break;
case R.id.layout3:
showFragment(2);
break;
case R.id.layout4:
showFragment(3);
break;
default:
break;
}
}
private void resetImg() { //调用灰色的图片,以让点击过后的图片回复原色
imageView1.setImageResource(R.drawable.chat_normal);
imageView2.setImageResource(R.drawable.people_normal);
imageView3.setImageResource(R.drawable.find_normal);
imageView4.setImageResource(R.drawable.personal_normal);
}
private void showFragment(int i) { //控制图片颜色的变换,其意义是点击一个图片之后该图片就会变亮
FragmentTransaction transaction = fm.beginTransaction();
hideFragment(transaction);
switch (i) {
case 0:
transaction.show(chat);
imageView1.setImageResource(R.drawable.chat_active);
break;
case 1:
transaction.show(people);
imageView2.setImageResource(R.drawable.people_active);
break;
case 2:
transaction.show(find);
imageView3.setImageResource(R.drawable.find_active);
break;
case 3:
transaction.show(personal);
imageView4.setImageResource(R.drawable.personal_active);
break;
default:
break;
}
transaction.commit();
}
}
运行界面:
!!!不显示运行界面的项目栏只需修改res/values/themes/themes.xml文件
添加一行代码即可:
- true
项目源码Gitee:青松xyz/WechatForm