WEEK7-arkk|转跳详情界面

422 阅读3分钟

功能说明

在上一次实验的基础上实现了:

  • 为RecyclerView的基本视图增加了CardView父容器,并为点赞和收藏添加了点击变色效果。

  • 添加了一些点击反馈动画。

本次实验中实现了:

  • RecylerView中动态内容最多显示10行,溢出则进行截断并添加省略号。

  • 点击RecylerView中动态内容转跳对应的动态详情界面。

    • 使用CollapsingToolbarLayout实现了浮动顶部ActionBar,下滑收起,上滑弹出。

    • 使用NestedScrollView实现了大于物理屏幕的视图滚动显示。

    • 使用TabLayout实现转发和评论的切换。

关键源码

Layout XML

本次实验中新建的Layout:

  • stream_activity

    • action_bar

    • stream_detail

    • shortcut_bar

xml1.jpg

xml2.jpg

CardView的圆角和阴影

app:cardCornerRadius="10dp" <!--圆角-->
app:cardElevation="3dp" <!--阴影-->

CollapsingToolbarLayout浮动ActionBar

app:layout_scrollFlags="scroll|enterAlways"

ImageView调整图片大小

android:scaleX="0.7"
android:scaleY="0.7"

控件绑定对应点击事件

android:onClick="streamDetail"

TextView设置最大行数&省略号截断+行间距

android:maxLines="10" <!--最大行数-->
android:ellipsize="end" <!--省略号截断-->
android:lineSpacingExtra="2dp" <!--行间距-->

Java

本次实验中新建的JAVA:

  • StreamActivity

StreamRVAdapter

public void onBindViewHolder(@NonNull StreamRVAdapter.StreamViewHolder holder, int position) {
    holder.ivAvatar.setTag(streamContainer.getAvatar());
}

MainActivity

/*收藏颜色变化*/
public void bookmarkClicked(View view) {
    ImageView imvIcon = view.findViewById(R.id.ivBkmk);

    if (bookmarkSelected == 0) {
        bookmarkSelected = 1;
        imvIcon.setColorFilter(getColor(R.color.bookmarked));
    } else {
        bookmarkSelected = 0;
        imvIcon.setColorFilter(getColor(R.color.purple_200));
    }
}

/*点击文字转跳详情*/
public void streamDetail(View view) {
    Intent intent = new Intent(MainActivity.this, StreamActivity.class);

    Bundle streamInfo = new Bundle();

    TextView textView = this.findViewById(R.id.tvUsrName);
    streamInfo.putString("usrName", String.valueOf(textView.getText()));
    textView = this.findViewById(R.id.tvPostTime);
    streamInfo.putString("postTime", String.valueOf(textView.getText()));
    textView = this.findViewById(R.id.tvStreamContent);
    streamInfo.putString("content", String.valueOf(textView.getText()));

    ImageView imageView = this.findViewById(R.id.ivAvatar);
    streamInfo.putInt("avatar", (int) imageView.getTag());

    intent.putExtra("detail", streamInfo);

    startActivity(intent);
}

StreamActivity

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.stream_activity);
    //隐藏状态栏
    getSupportActionBar().hide();

    Intent intent = getIntent();

    Bundle detail = intent.getBundleExtra("detail");

    TextView textView = findViewById(R.id.tvCurrentUsrName);
    textView.setText(detail.getString("usrName"));
    textView = findViewById(R.id.tvActionBarAvatarUsrName);
    textView.setText(detail.getString("usrName"));
    textView = findViewById(R.id.tvCurrentPostTime);
    textView.setText(detail.getString("postTime"));
    textView = findViewById(R.id.tvCurrentStreamContent);
    textView.setText(detail.getString("content"));
    ImageView imageView = findViewById(R.id.ivCurrentAvatar);
    imageView.setImageResource(detail.getInt("avatar"));
    imageView = findViewById(R.id.ivActionBarAvatar);
    imageView.setImageResource(detail.getInt("avatar"));
}

/*返回键*/
public void backClicked(){
    finish();
}

功能测试

RecyclerView

  • CardView父容器

  • 点赞和收藏点击变色

  • 动态内容最多显示10行,溢出则截断并添加省略号

sample1.gif

点击转跳详情界面

  • 浮动顶部ActionBar,下滑收起,上滑弹出

  • 长视图滚动显示

  • TabLayout切换转发和评论

  • 返回键回到上级界面

sample2.gif

核心技术

转跳的点击事件有多种实现方法:

  • 在RecyclerView的Adapter中用Interface实现

  • 在Activity中通过内嵌类实现

  • 在Layout XML中为控件的OnClick属性绑定Activity中的方法实现

这三种方法转跳都是使用Intent在两个Activity间转跳,但利用Bundle传递值的方法略有不同,Adapter中通过点击项的Position找到对应内容,而Activity中则需要在当前context中通过findViewById()逐一获取值。 两种方法相比较,Adapter中用Interface实现在传值时更为方便,在希望传递图片时尤为明显————在Activity中通过Bundle传递图片,要么需要将图片转换为Bitmap格式;要么需要在使用Adapter适配时将图片的Resource的ID设为tag,以便在Activity中用getTag()获取。

心得体会

  • UI设计参考了豆瓣和Share,但有些复杂的显示/动画效果目前实现尚有困难,希望经过本学期的努力后能把APP打磨成设想的样子。
  • 在开发者设置中开启“显示布局边界”,可以直观地观察到优秀APP的布局。

Repository

Gitee