Hola ~ Hola a todos, en este artículo, echemos un vistazo al uso de Java para simular la interfaz de WeChat.Primero , echemos un vistazo al efecto.
comienzo
En primer lugar, echemos un vistazo a la imagen GIF. Nos damos cuenta del efecto de cambiar la interfaz deslizando hacia la izquierda y hacia la derecha y haciendo clic en el botón del icono a continuación . Para lograr el efecto deslizante, tenemos que usar el control ViewPager2 .
Sección 1
En el archivo activity_main.xml , escribimos androidx.viewpager2.widget.ViewPager2 Cuando lo escribimos, algunas personas pueden volverse populares . En este momento, necesitamos escribir la implementación 'androidx.viewpager2:viewpager2:1.0.0-alpha01' en las dependencias del archivo build.gradle en android . Luego escribimos el código.
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/id_viewpager"/>Para realizar el ícono, necesitamos descargar 8 imágenes como "WeChat, Contact, Discovery, Me" del sitio web de gráficos vectoriales de Alibaba (debo decir que el sitio web de Ali es realmente útil y muy recomendable) y ponerlas en el dibujable carpeta. Cree un archivo .xml en el elemento de diseño llamado tab_weixin y escriba el código, configure su efecto sin clic y haga clic para cambiar a la siguiente imagen.
<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>De la misma manera, creamos los archivos tab_contact.xml, tab_find y tab_profile.xml respectivamente, y colocamos las imágenes correspondientes en ellos, como se muestra en la figura:
Después de escribir, creamos el archivo button_layout.xml debajo del archivo de diseño, importamos el tab_weixin.xml que creamos y configuramos la identificación, la alineación, el texto, el peso y otros códigos de la siguiente manera
<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>Luego, importe los archivos tab_contact.xml, tab_find y tab_profile.xml respectivamente (recuerde aquí, asegúrese de recordar el valor de identificación que estableció, de lo contrario, será muy problemático más adelante y seré torturado para realizar pruebas personales) .
Luego crea el archivo feragmnt_blank.xml y escribe el código:
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="36sp"
android:id="@+id/text"
android:text="我" />Sección 2
Luego, creamos una clase llamada clase MyFragmentPagerAdapter , y luego creamos la clase BlankFragment y escribimos el código:
MiFragmentoPagerAdapter.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();
}Fragmento en blanco.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);
}
}Seccion 3
Luego escribe el código en 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());
}
}Haga clic para ejecutar, ok, no hay problema, como se muestra en la figura:
Proyecto de todas las fuentes:
https://gitee.com/a-programmer-named-zhui/android-code-practice-project.gitOriginalmente planeé escribirlo el día 2, pero tengo que escribirlo ahora por algo más. La actualización reciente será relativamente lenta (no se puede actualizar diariamente), porque la Copa Blue Bridge llegará pronto, estoy revisando las preguntas, así que perdónenme ~
Si cree que este blog es útil para usted, venga a tres seguidos + seguimiento , su apoyo es mi motivación para actualizar y escribir código, si no, no importa. Siempre compartiré mi propio aprendizaje, hhh~
(Para atención) Si necesita el código fuente, puede enviar un mensaje privado ~
