Android TV focus effect implementation analysis and androidtv Focus Analysis

Android TV focus effect implementation analysis and androidtv Focus Analysis

The focus on Android TV highlights the special effects that everyone has seen. Let's implement it first.

First, let's talk about the implementation principle. We mainly rewrite RelativeLayout to implement the item, and then add the scalanimation animation effect to it. Some problems have been found at the beginning of processing, such as how to add a selected border, and how to implement the animation after the item is zoomed in. The Implementation Details are shown below.

The first is the item code:

<view xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/item"    android:layout_width="@dimen/home_channel_item_width"    android:layout_height="@dimen/home_channel_item_height"    class="com.eastelsoft.tv.widget.home.HomeItemContainer"    android:clickable="true"    android:focusable="true"    android:focusableInTouchMode="true"    android:clipChildren="false"    android:clipToPadding="false" >    <com.eastelsoft.tv.widget.ESImageView        android:id="@+id/img"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="@drawable/holder_nor"        android:duplicateParentState="true"        android:scaleType="fitXY" />    <!-- -->    <com.eastelsoft.tv.widget.ESImageView        android:id="@+id/hover"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:contentDescription="@string/desc"        android:duplicateParentState="true"        android:scaleType="fitXY"        android:src="@drawable/sl_image_home_navigator" />        <TextView        android:id="@+id/text"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_marginBottom="@dimen/home_item_text_margin"        android:layout_marginLeft="@dimen/home_item_text_margin"        android:layout_marginRight="@dimen/home_item_text_margin"        android:ellipsize="marquee"        android:gravity="bottom|right|center"        android:includeFontPadding="false"        android:marqueeRepeatLimit="5"        android:maxWidth="@dimen/px310"        android:shadowColor="#88333333"        android:shadowDx="2.0"        android:shadowDy="2.0"        android:shadowRadius="2.0"        android:singleLine="true"        android:textColor="#ffffffff" /></view>

A custom view is defined here, and the code is put behind it. An img is added to each item to place the content image, a hover, display the selected border, and a text, displays text instructions.

The src of hover is a selector drawable. when the focus is not set, the background of hover is tansparent. when the focus is set, the image is placed in the outer frame.

Custom HomeItemContainer code:

public class HomeItemContainer extends RelativeLayout {private Animation scaleSmallAnimation;private Animation scaleBigAnimation;public HomeItemContainer(Context context) {super(context);}public HomeItemContainer(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}public HomeItemContainer(Context context, AttributeSet attrs) {super(context, attrs);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);}@Overrideprotected void onFocusChanged(boolean gainFocus, int direction, Rect previouslyFocusedRect) {super.onFocusChanged(gainFocus, direction, previouslyFocusedRect);if (gainFocus) {this.bringToFront();getRootView().requestLayout();getRootView().invalidate();zoomOut();} else {zoomIn();}}private void zoomIn() {if (scaleSmallAnimation == null) {scaleSmallAnimation = AnimationUtils.loadAnimation(getContext(), R.anim.anim_scale_small);}startAnimation(scaleSmallAnimation);}private void zoomOut() {if (scaleBigAnimation == null) {scaleBigAnimation = AnimationUtils.loadAnimation(getContext(), R.anim.anim_scale_big);}startAnimation(scaleBigAnimation);}}

Note the onFocusChanged method. To prevent the item from being blocked by other items, call the bringToFront method to place the item at the top level, and then call the method of the parent view to re-draw the item, item must be in the same parent view; otherwise, requestLayout and invalidate may not work.

By the way, put a code for downgrading scaleanimation:

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:fillAfter="false"    android:fillBefore="true"    android:shareInterpolator="false" >    <scale        android:duration="200"        android:fromXScale="1.1"        android:fromYScale="1.1"        android:interpolator="@android:anim/accelerate_decelerate_interpolator"        android:pivotX="50.0%"        android:pivotY="50.0%"        android:repeatCount="0"        android:toXScale="1.0"        android:toYScale="1.0" /></set>

The attributes are not described in detail. If you are interested, Google.

Finally, put the parent view of the item:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal"    android:padding="10dp"    android:clipChildren="false"    android:clipToPadding="false" >    <include         android:id="@+id/channel_0"        android:layout_width="@dimen/home_channel_item_width"    android:layout_height="@dimen/home_channel_item_height"        layout="@layout/home_page_channel_item"        android:layout_alignParentLeft="true"        android:layout_alignParentTop="true"        android:layout_margin="3dp" />        <include        android:id="@+id/channel_1"        android:layout_width="@dimen/home_channel_item_width"    android:layout_height="@dimen/home_channel_item_height"        layout="@layout/home_page_channel_item"        android:layout_below="@id/channel_0"        android:layout_alignLeft="@id/channel_0" />        <include         android:id="@+id/channel_2"        android:layout_width="@dimen/home_channel_item_width"    android:layout_height="@dimen/home_channel_item_height"        layout="@layout/home_page_channel_item"        android:layout_toRightOf="@id/channel_0"        android:layout_alignTop="@id/channel_0"        android:layout_marginRight="3dp"        android:layout_marginBottom="3dp"/>        <include         android:id="@+id/channel_3"        android:layout_width="@dimen/home_channel_item_width"    android:layout_height="@dimen/home_channel_item_height"        layout="@layout/home_page_channel_item"        android:layout_alignLeft="@id/channel_2"        android:layout_below="@id/channel_2"/>        <include         android:id="@+id/channel_4"        android:layout_width="@dimen/home_channel_item_width"    android:layout_height="@dimen/home_channel_item_height"        layout="@layout/home_page_channel_item"        android:layout_toRightOf="@id/channel_2"        android:layout_alignTop="@id/channel_2"        android:layout_marginRight="3dp"        android:layout_marginBottom="3dp"/>        <include         android:id="@+id/channel_5"        android:layout_width="@dimen/home_channel_item_width"    android:layout_height="@dimen/home_channel_item_height"        layout="@layout/home_page_channel_item"        android:layout_alignLeft="@id/channel_4"        android:layout_below="@id/channel_4"/>        <include         android:id="@+id/channel_6"        android:layout_width="@dimen/home_channel_item_width"    android:layout_height="@dimen/home_channel_item_height"        layout="@layout/home_page_channel_item"        android:layout_toRightOf="@id/channel_4"        android:layout_alignTop="@id/channel_4"        android:layout_marginRight="3dp"        android:layout_marginBottom="3dp"/>        <include         android:id="@+id/channel_7"        android:layout_width="@dimen/home_channel_item_width"    android:layout_height="@dimen/home_channel_item_height"        layout="@layout/home_page_channel_item"        android:layout_alignLeft="@id/channel_6"        android:layout_below="@id/channel_6"/>        <include         android:id="@+id/channel_8"        android:layout_width="@dimen/home_channel_item_width"    android:layout_height="@dimen/home_channel_item_height"        layout="@layout/home_page_channel_item"        android:layout_toRightOf="@id/channel_6"        android:layout_alignTop="@id/channel_6"        android:layout_marginRight="3dp"        android:layout_marginBottom="3dp"/>        <include         android:id="@+id/channel_9"        android:layout_width="@dimen/home_channel_item_width"    android:layout_height="@dimen/home_channel_item_height"        layout="@layout/home_page_channel_item"        android:layout_alignLeft="@id/channel_8"        android:layout_below="@id/channel_8"/></RelativeLayout>

Here I have defined 10 items. Pay attention to the two attributes of RelativeLayout. Set clipChildren to false so that the children view can be larger than its own size, and set clipToPadding to false, the children view can be drawn using the position of padding. With these two attributes, the item can be enlarged without being blocked.

Well, the focus special effect tutorial will be mentioned here. If you have any questions, you can submit them in the comments.

[Android interface development] focuses on smooth mobile animation in the ui. You are welcome to have a heated discussion.

The question you raised is almost a very difficult problem to solve. A lot of people are afraid to lower the collection rate and do not dare to answer the question. I will be eager to get out, and my collection rate is not high anyway.
The landlord should be a technical controller.

The Focus movement of ListView and GridView is indeed not smooth. Do you want to smooth it, or do you want to experience better special effects? You can only rewrite the onDraw function by yourself. This is still difficult to solve, even if it inherits the ListView and the GridView are not good. The best way is to inherit the View by yourself, and then implement the ListView or GridView function, and then implement the Focus movement effect.

Just like some time ago, I used a SlidingDrawer sliding to the right. In fact, the android system does not have SlidingDrawer sliding to the right. It can only slide upwards and left. I downloaded a piece of code from the Internet. It was implemented by a foreign guy. He wrote a class that inherited LinearLayout, implemented all the functions of SlidingDrawer, and slide to the right. I modified it and found it really useful. We can also implement a ListView or GridView by ourselves. The current work schedule is tight. I will study it some time later.

I had to catch up with the code and was caught by the Technical Manager and loose on the Internet.
Good day, buddy.

Question about setting the focus effect for android

These should be very basic questions. Finding answers online is not as fast as turning books.