android开发--仿微信朋友圈界面

话不多说，先来看两张效果图

看图片效果还凑合，就是“朋友圈”三个字和头像的动画过渡效果和微信朋友圈的实际效果还是有点差距，可以的话以后慢慢再优化吧，这里贴出相关的代码，可能部分代码比较多余，以后再做修改吧

一：界面布局代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="320dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/friends_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:src="@drawable/apple"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <Button
                android:id="@+id/back_view"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/ic_back"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="pin"
                android:layout_marginTop="42dp"
                android:layout_marginLeft="2dp" />

            <Button
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:fitsSystemWindows="true"
                android:background="@drawable/ic_camera"
                android:layout_gravity="right"
                app:layout_collapseMode="pin"
                android:layout_marginTop="40dp"
                android:layout_marginRight="5dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="昵称"
                android:layout_gravity="bottom|right"
                android:layout_marginRight="100dp"
                android:layout_marginBottom="5dp"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_view"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="30dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <ImageView
        android:id="@+id/image1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_margin="10dp"
        android:background="@drawable/nav_icon"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end" />

</android.support.design.widget.CoordinatorLayout>

由于这当中用到了recyclerview，所以还得写一个子项的布局代码，如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/image2"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/orange"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="10dp"/>

        <LinearLayout
            android:id="@+id/linear1"
            android:layout_toRightOf="@id/image2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="10dp">

            <TextView
                android:id="@+id/friend_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="好友昵称"
                android:textColor="#2CA3E5"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="好友所发状态内容"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linear2"
            android:layout_below="@id/linear1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_alignLeft="@id/linear1">

            <ImageView
                android:id="@+id/friend_image"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/banana" />

            <ImageView
                android:id="@+id/friend_imag"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/pear"
                android:visibility="gone"/>

            <ImageView
                android:id="@+id/friend_ima"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/pineapple"
                android:visibility="gone"/>
        </LinearLayout>

        <TextView
            android:id="@+id/time_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/linear2"
            android:layout_alignLeft="@id/linear1"
            android:layout_marginTop="10dp"
            android:text="30分钟前"/>

        <Button
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignBottom="@+id/time_text"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:background="@drawable/ic_comment"/>

        <View
            android:layout_below="@+id/time_text"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginTop="20dp"
            android:background="@android:color/darker_gray" />
    </RelativeLayout>

</android.support.v7.widget.CardView>

Friend类：

package com.example.wechattest;

public class Friend {
    private int imageId;
    public Friend(int imageId) {
        this.imageId = imageId;
    }
    public int getImageId() {
        return imageId;
    }
}

FriendAdapter类：

package com.example.wechattest;

import android.content.Context;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.List;
import java.util.Random;

public class FriendAdapter extends RecyclerView.Adapter<FriendAdapter.ViewHolder> {
    private Context mContext;
    private List<Friend> mFriendList;
    static class ViewHolder extends RecyclerView.ViewHolder {
        CardView cardView;
        ImageView image1;
        ImageView image2;
        ImageView image3;
        public ViewHolder(View view) {
            super(view);
            cardView = (CardView) view;
            image1 = (ImageView) view.findViewById(R.id.friend_image);
            image2 = (ImageView) view.findViewById(R.id.friend_imag);
            image3 = (ImageView) view.findViewById(R.id.friend_ima);
        }
    }
    public FriendAdapter(List<Friend> friendList) {
        mFriendList = friendList;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent,int viewType) {
        if (mContext == null) {
            mContext = parent.getContext();
        }
        View view = LayoutInflater.from(mContext).inflate(R.layout.friend_item,parent,false);
        return new ViewHolder(view);
    }
    @Override
    public void onBindViewHolder(ViewHolder holder,int position) {
        getRandomLength();
        holder.image2.setVisibility(View.GONE);
        holder.image3.setVisibility(View.GONE);
        if (getRandomLength() == 1) {
            holder.image1.setVisibility(View.VISIBLE);
        } else if (getRandomLength() == 2) {
            holder.image1.setVisibility(View.VISIBLE);
            holder.image2.setVisibility(View.VISIBLE);
        } else if (getRandomLength() == 3) {
            holder.image1.setVisibility(View.VISIBLE);
            holder.image2.setVisibility(View.VISIBLE);
            holder.image3.setVisibility(View.VISIBLE);
        }
    }
    @Override
    public int getItemCount() {
        return mFriendList.size();
    }
    private int getRandomLength() {
        Random random = new Random();
        int length = random.nextInt(3) + 1;
        return length;
    }
}

主活动代码：

package com.example.wechattest;

import android.graphics.Color;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class FriendsActivity extends AppCompatActivity {
    private Friend[] friends = {new Friend(R.drawable.banana),new Friend(R.drawable.orange),new Friend(R.drawable.pear)};
    private List<Friend> friendList = new ArrayList<>();
    private FriendAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_friends);
        AppBarLayout appBarLayout = findViewById(R.id.appBar);
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                CollapsingToolbarLayout collapsingToolbar = findViewById(R.id.collapsing_toolbar);
                int color = Color.argb(200,0,0,0);
                collapsingToolbar.setCollapsedTitleTextColor(color);
                ImageView imageView = findViewById(R.id.image1);
                if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) { // 折叠状态
                    collapsingToolbar.setTitle("朋友圈");
                    imageView.setVisibility(View.GONE);
                } else { // 非折叠状态
                    collapsingToolbar.setTitle("");
                    imageView.setVisibility(View.VISIBLE);
                }
            }
        });
        Button backButton = (Button) findViewById(R.id.back_view);
        backButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        initFriends();
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        adapter = new FriendAdapter(friendList);
        recyclerView.setAdapter(adapter);
    }
    private void initFriends() {
        friendList.clear();
        for (int i = 0; i < 40; i++) {
            Random random = new Random();
            int index = random.nextInt(friends.length);
            friendList.add(friends[index]);
        }
    }
}