WEEK7 – arkk | redirects interface for details

Functional specifications

On the basis of the last experiment:

• Added CardView parent container for RecyclerView base view and click color change effect for likes and favorites.

• Added some click feedback animations.

In this experiment:

• A maximum of 10 lines of dynamic content are displayed in RecylerView. Overflows are truncated and ellipsis is added.

• Click the dynamic details interface corresponding to the dynamic content transition in RecylerView.

  • CollapsingToolbarLayout a floating top ActionBar is implemented using CollapsingToolbarLayout, which slides down and pops up.

  • NestedScrollView implements a scrolling display of views that is larger than the physical screen.

  • Use TabLayout to switch between forwarding and commenting.

Key source

Layout XML

The new Layout in this experiment:

• stream_activity

  • action_bar

  • stream_detail

  • shortcut_bar

Rounded corners and shadows of CardView

app:cardCornerRadius="10dp" <! - the rounded - >
app:cardElevation="3dp" <! -- -- -- > shadow
Copy the code

CollapsingToolbarLayout floating ActionBar

app:layout_scrollFlags="scroll|enterAlways"
Copy the code

ImageView resizes images

Android: scaleX = "0.7" android: scaleY = "0.7"Copy the code

Control bindings correspond to click events

android:onClick="streamDetail"
Copy the code

TextView sets maximum line count & ellipsis truncation + line spacing

android:maxLines="10" <! -- Maximum number of rows -->
android:ellipsize="end" <! -- Ellipsis truncation -->
android:lineSpacingExtra="2dp" <! -- Line spacing -->
Copy the code

Java

JAVA created in this experiment:

• StreamActivity

StreamRVAdapter

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

MainActivity

/* Select color change */
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)); }}/* Click text transfer details */
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);
}
Copy the code

StreamActivity

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.stream_activity);
    // Hide status bar
    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"));
}

/* Return key */
public void backClicked(a){
    finish();
}
Copy the code

A functional test

RecyclerView

• CardView parent container

• Click “like” and “favorites” to change color

• Dynamic content is displayed at most 10 lines, and overflows truncate and ellipsis is added

Click the transfer details interface

• Float top ActionBar, slide down to fold, slide up to pop up

• Long view scroll display

• TabLayout toggles forwarding and commenting

• Return key to return to the upper interface

The core technology

There are several ways to implement the hop click event:

• Interface is used in RecyclerView Adapter

• This is implemented by nested classes in an Activity

• Bind the Activity method implementation to the control’s OnClick property in the Layout XML

Each of these methods uses an Intent to jump between two activities, but uses a slightly different method of transferring a value from the Bundle. In the Adapter, click the item’s Position to find the corresponding content. In an Activity, you need to fetch the values one by one in the current context using findViewById(). Compared with the two methods, Adapter Interface is more convenient to transfer values, especially when you want to transfer images ———— in the Activity through the Bundle to transfer images, or need to convert images to Bitmap format; Either you need to set the ID of the image’s Resource to a tag when using Adapter adaptation so that you can get it with getTag() in your Activity.

tips

• The UI design refers to Douban and Share, but some complicated display/animation effects are still difficult to achieve. I hope I can polish the APP into the desired shape after efforts in this semester.
• Turn on “Show Layout Boundaries” in developer Settings to visually observe the layout of a good APP.

Repository

Gitee