Hello~ Hello everyone, in this article, let's take a look at using java to simulate the WeChat interface . First, let's take a look at the effect.
beginning
First of all, let's look at the GIF image. We realize the effect of switching the interface by sliding left and right and clicking the icon button below . To achieve the sliding effect, we have to use the control ViewPager2 .
Section 1
In the activity_main.xml file, we write androidx.viewpager2.widget.ViewPager2 . When we write it, some people may become popular . At this time, we need to write the implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01' in the dependencies under the build.gradle file under android . Then we write the code.
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/id_viewpager"/>To realize the icon, we need to download 8 pictures such as "WeChat, Contact, Discovery, Me" from the Alibaba vector graphics website (I have to say that the Ali website is really useful and highly recommended) and put them in the drawable folder. Create a .xml file in the drawable called tab_weixin and write the code, set its no-click effect and click it to switch to the next picture.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/weixin_pressed_one" android:state_selected="true"/>
<item android:drawable="@drawable/weixin_pressed_two"/>
</selector>In the same way, we create tab_contact.xml, tab_find, and tab_profile.xml files respectively, and put the corresponding pictures into them, as shown in the figure:
After writing, we create the button_layout.xml file under the layout file. We import the tab_weixin.xml we created , and set the id, alignment, text, weight and other codes as follows
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical"
android:id="@+id/id_tab_weixin">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:background="@drawable/tab_weixin"
android:id="@+id/tab_iv_weixin"/>
<TextView
android:layout_width="32dp"
android:layout_height="wrap_content"
android:id="@+id/text_weixin"
android:gravity="center"
android:text="微信"/>
</LinearLayout>Then import the tab_contact.xml, tab_find, and tab_profile.xml files respectively (remind here, be sure to remember the id value you set, otherwise it will be very troublesome later, and I will be tortured for personal testing) .
Then create the feragmnt_blank.xml file and write the code:
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="36sp"
android:id="@+id/text"
android:text="我" />Section 2
Then, we create a class called MyFragmentPagerAdapter class, and then create the BlankFragment class and write the code:
MyFragmentPagerAdapter.java :
public class MyFragmentPagerAdapter extends FragmentStateAdapter {
List<Fragment> fragmentList = new ArrayList<>();
public MyFragmentPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, List<Fragment> fragment) {
super(fragmentManager,lifecycle);
fragmentList = fragment;
}
@NonNull
@Override
public Fragment createFragment(int position) {
return fragmentList.get(position);
}
@Override
public int getItemCount() {
return fragmentList.size();
}BlankFragment.java ：
public class BlankFragment extends Fragment {
private static final String ARG_TEXT = "param1";
private String mTextString;
View rootView;
public BlankFragment() {
}
public static BlankFragment newInstance(String param1){
BlankFragment fragment = new BlankFragment();
Bundle args = new Bundle();
args.putString(ARG_TEXT,param1);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mTextString = getArguments().getString(ARG_TEXT);
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if (rootView == null){
rootView = inflater.inflate(R.layout.fragment_blank,container,false);
}
InitView();
return rootView;
}
private void InitView() {
TextView textView = rootView.findViewById(R.id.text);
textView.setText(mTextString);
}
}Section 3
Then write the code in MainActivity.java :
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
ViewPager2 viewPager;
private LinearLayout llchat, llContacts, llFind, llProfile;
private ImageView ivChat, ivContacts, ivFind, ivProfile, ivCorrect;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initPager();
initTabView();
}
private void initTabView() {
llchat = findViewById(R.id.id_tab_weixin);
llchat.setOnClickListener(this);
llContacts = findViewById(R.id.id_tab_contact);
llContacts.setOnClickListener(this);
llFind = findViewById(R.id.id_tab_find);
llFind.setOnClickListener(this);
llProfile = findViewById(R.id.id_tab_profile);
llProfile.setOnClickListener(this);
ivChat = findViewById(R.id.tab_iv_weixin);
ivContacts = findViewById(R.id.tab_iv_contact);
ivFind = findViewById(R.id.tab_iv_find);
ivProfile = findViewById(R.id.tab_iv_profile);
ivChat.setSelected(true);
ivCorrect = ivChat;
}
private void initPager() {
viewPager = findViewById(R.id.id_viewpager);
ArrayList<Fragment> fragments = new ArrayList<>();
fragments.add(BlankFragment.newInstance("微信聊天"));
fragments.add(BlankFragment.newInstance("通讯录"));
fragments.add(BlankFragment.newInstance("发现"));
fragments.add(BlankFragment.newInstance("我"));
MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), getLifecycle(), fragments);
viewPager.setAdapter(pagerAdapter);
viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
super.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
changeTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {
super.onPageScrollStateChanged(state);
}
});
}
private void changeTab(int position) {
ivCorrect.setSelected(false);
switch (position){
case R.id.id_tab_weixin:
viewPager.setCurrentItem(0);
case 0:
ivChat.setSelected(true);
ivCorrect = ivChat;
break;
case R.id.id_tab_contact:
viewPager.setCurrentItem(1);
case 1:
ivContacts.setSelected(true);
ivCorrect = ivContacts;
break;
case R.id.id_tab_find:
viewPager.setCurrentItem(2);
case 2:
ivFind.setSelected(true);
ivCorrect = ivFind;
break;
case R.id.id_tab_profile:
viewPager.setCurrentItem(3);
case 3:
ivProfile.setSelected(true);
ivCorrect = ivProfile;
break;
}
}
@Override
public void onClick(View view) {
changeTab(view.getId());
}
}Click to run, ok, no problem, as shown in the figure:
All-source project:
https://gitee.com/a-programmer-named-zhui/android-code-practice-project.gitOriginally I planned to write it on the 2nd, but I have to write it now because of something else. The recent update will be relatively slow (can not be updated daily), because the Blue Bridge Cup is coming soon, I am reviewing the questions, so forgive me~
If you think this blog is helpful to you, then come to three consecutive + follow , your support is my motivation to update and write code, if not, it doesn't matter. I will always share my own learning, hhh~
(For attention) If you need the source code, you can send a private message~
