话不多说,先来看两张效果图
看图片效果还凑合,就是“朋友圈”三个字和头像的动画过渡效果和微信朋友圈的实际效果还是有点差距,可以的话以后慢慢再优化吧,这里贴出相关的代码,可能部分代码比较多余,以后再做修改吧
一:界面布局代码:
<?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]);
}
}
}
手机扫一扫
移动阅读更方便
你可能感兴趣的文章