android仿微信右侧 android 仿微信

本文仅做记录成长！

我的要求不高，每天进步一点点就好！相信努力总能得到回报，即使只是一点点！

通过微信截图，抠出了几个需要的素材

然后开始搞事情了！

首先制作UI的顶部，没啥特别的（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="50dp"
    android:orientation="horizontal"
    android:background="#303030">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center_vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:text="微信"
        android:textColor="#FFF"
        android:textStyle="bold"
        android:textSize="18dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_gravity="center_vertical">
        <ImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:background="@drawable/select_icon"/>
        <ImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:background="@drawable/jia_icon"/>
    </LinearLayout>
</LinearLayout>

然后有头当然得有尾，顺便把底部布局也添加了(bottom.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="70dp"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/tab01"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">
        <ImageView
            android:id="@+id/chat_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/chat_back"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="聊天"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab02"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">
        <ImageView
            android:id="@+id/address_img"
            android:layout_marginTop="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/address_back"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab03"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">
        <ImageView
            android:id="@+id/found_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/found_back"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发现"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab04"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">
        <ImageView
            android:id="@+id/my_img"
            android:layout_marginTop="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/my_back"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我"/>
    </LinearLayout>
</LinearLayout>

头尾都好了，接下来就是中间的ViewPager部分了（MainActivity.xml）

用include加载头部尾部

然后添加一个ViewPager和一个ImageView填充一条细细的线

<?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"
    android:orientation="vertical">

    <include layout="@layout/top"/>
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
        </android.support.v4.view.ViewPager>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#d7d7d7"/>
    <include layout="@layout/buttom"/>
</LinearLayout>

当然那些添加好之后，还得给ViePager添加一些料，添加4个布局文件，对应4个底部菜单，当然这些料都是比较简单的！

4个Layout除了android:text 内容不同之外其余相同，所以就省略咯！

<?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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="50dp"
        android:text="聊天"/>
</LinearLayout>

UI都勉强的弄好了~当然是给里面加点料了！

在MainActivity中先做声明

private ViewPager viewPager;
    private List<View> list;//存放ViawPage的View
    //底部菜单的图片
    private ImageView chat_img;
    private ImageView address_img;
    private ImageView found_img;
    private ImageView my_img;
    //底部每个菜单对应的LinearLayout
    private LinearLayout tab01;
    private LinearLayout tab02;
    private LinearLayout tab03;
    private LinearLayout tab04;

创建一个初始化控件的方法initView：

//初始化控件
    private void initView() {
        viewPager = findViewById(R.id.viewPager);
        //实例化底部按钮图片
        chat_img = findViewById(R.id.chat_img);
        address_img = findViewById(R.id.address_img);
        found_img = findViewById(R.id.found_img);
        my_img = findViewById(R.id.my_img);
        chat_img.setImageResource(R.drawable.chat_select);
        //实例化底部LinearLayout
        tab01 = findViewById(R.id.tab01);
        tab02 = findViewById(R.id.tab02);
        tab03 = findViewById(R.id.tab03);
        tab04 = findViewById(R.id.tab04);

    }

创建一个底部图标默认为未选中的方法：

//默认底部Icon为未选中状态
    public void initIcon(){
        chat_img.setImageResource(R.drawable.chat_back);
        address_img.setImageResource(R.drawable.address_back);
        found_img.setImageResource(R.drawable.found_back);
        my_img.setImageResource(R.drawable.my_back);
    }

创建一个方法加载Layout到ViewPager，同时实现了底部菜单图标跟随滑动而变成选中的状态（loading）

//ViewPager加载布局
    private void loading() {
        //实例化集合
        list = new ArrayList<View>();
        //布局转为View 放入集合
        LayoutInflater inflater = LayoutInflater.from(this);
        View tab01 = inflater.inflate(R.layout.tab01,null);
        View tab02 = inflater.inflate(R.layout.tab02,null);
        View tab03 = inflater.inflate(R.layout.tab03,null);
        View tab04 = inflater.inflate(R.layout.tab04,null);
        //View加入集合
        list.add(tab01);
        list.add(tab02);
        list.add(tab03);
        list.add(tab04);

        //创建适配器
        PagerAdapter adapter = new PagerAdapter() {
            //初始化适配器存入Vied
            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                container.addView(list.get(position));
                return list.get(position);
            }
            //销毁View
            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                container.removeView(list.get(position));
            }
            //滑动的VIew的个数
            @Override
            public int getCount() {
                return list.size();
            }


            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
                return view == object;
            }
        };
        //viewPager加载适配器
        viewPager.setAdapter(adapter);
        
        //viewPager滑动监听事件
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                switch(position){
                    case 0:
                        initIcon();//调用方法，默认底部菜单全部设置为未选中
                        chat_img.setImageResource(R.drawable.chat_select);
                        break;
                    case 1:
                        initIcon();
                        address_img.setImageResource(R.drawable.address_sele);
                        break;
                    case 2:
                        initIcon();
                        found_img.setImageResource(R.drawable.found_select);
                        break;
                    case 3:
                        initIcon();
                        my_img.setImageResource(R.drawable.my_sele);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

到目前为止已经实现了 基本想要的功能了，但是底部菜单的点击还是没效果的！所以得添加多一个方法，让底部的菜单也能物尽其用（bottomOnClick）,MainActivity需要实现按钮监听事件 implements View.OnClickListener，实现onClick类！

//底部按钮
    private void bottomOnClick() {
        tab01.setOnClickListener(this);
        tab02.setOnClickListener(this);
        tab03.setOnClickListener(this);
        tab04.setOnClickListener(this);
    }

//监听底部按钮，切换页面和改变底部图标样式
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.tab01:
                //切换到第一页
                viewPager.setCurrentItem(0);
                //图标默认全部未选中
                initIcon();
                //更改为选择的图标样式
                chat_img.setImageResource(R.drawable.chat_select);
                break;
            case R.id.tab02:
                viewPager.setCurrentItem(1);
                initIcon();
                address_img.setImageResource(R.drawable.address_sele);
                break;
            case R.id.tab03:
                viewPager.setCurrentItem(2);
                initIcon();
                found_img.setImageResource(R.drawable.found_select);
                break;
            case R.id.tab04:
                viewPager.setCurrentItem(3);
                initIcon();
                my_img.setImageResource(R.drawable.my_sele);
                break;
        }
    }

当然我们还需要调用方法和把原有默认的标题栏去掉，在onCreate操作：

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏 
        setContentView(R.layout.activity_main);
        initView();
        loading();
        bottomOnClick();
    }

好了！终于是完成了。看看成果的时候到了！