TV首页Menu指定父布局选中子View后绘制在最上层

最新推荐文章于 2021-05-26 02:24:58 发布
最新推荐文章于 2021-05-26 02:24:58 发布
阅读量255 收藏
点赞数
分类专栏： TV开发UI TV基础 文章标签： Tv Menu 安卓
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38996911/article/details/93634122
版权

1，父布局内添加view的顺序是最后添加的位于最上层，效果为如下：
原始效果
现在要实现选中的view位于最上层
最终效果
自定义HomeMenuView继承LinearLayout，重写getChildDrawingOrder方法，指定view绘制的顺序：

   @Override
    protected int getChildDrawingOrder(int childCount, int i) {
        View focusedChild = this.getFocusedChild();
        int focusViewIndex = this.indexOfChild(focusedChild)
        if (focusViewIndex < 0) {
            return i;
        }
        if (focusViewIndex == i) {
            return childCount - 1;
        } else if (i == childCount - 1) {
            return focusViewIndex;
        } else {
            return i;
        }
//        return super.getChildDrawingOrder(childCount, i);
    }

并在自定义view初始化时设置

this.setChildrenDrawingOrderEnabled(true);//启用子视图排序功能

完整代码：

public class HomeMenuView extends LinearLayout {
  
    private String TAG = "HomeMenuView";
    private List<HomeMenuBeen> menuBeens;

    public HomeMenuView(Context context) {
        this(context, null);
        initView(context);
    }

    public HomeMenuView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        initView(context);
    }

    public HomeMenuView(Context context, AttributeSet attrs, int defaultValue) {
        super(context, attrs, defaultValue);
    }

    private void initView(Context context) {
        this.setOrientation(HORIZONTAL);
        this.setGravity(Gravity.CENTER);
        this.setChildrenDrawingOrderEnabled(true);
        initMenus();
        if (menuBeens == null) return;

        for (int i = 0; i < menuBeens.size(); i++) {
            View itemView = LayoutInflater.from(context).inflate(R.layout.menu_home_item, null);
            LinearLayout ll_smallItem = (LinearLayout) itemView.findViewById(R.id.ll_smallItem);
            LinearLayout ll_bigItem = (LinearLayout) itemView.findViewById(R.id.ll_bigItem);
            LinearLayout ll_bigTv = (LinearLayout) itemView.findViewById(R.id.ll_bigTv);
            ImageView img_small = (ImageView) itemView.findViewById(R.id.img_small);
            ImageView img_big = (ImageView) itemView.findViewById(R.id.img_big);
            TextView tv_smallTv = (TextView) itemView.findViewById(R.id.tv_smallTv);
            TextView tv_bigTv = (TextView) itemView.findViewById(R.id.tv_bigTv);
            TextView tv_bigTvNote = (TextView) itemView.findViewById(R.id.tv_bigTvNote);
            img_small.setImageResource(menuBeens.get(i).getImgRes());
            img_big.setImageResource(menuBeens.get(i).getImgRes());
            tv_smallTv.setText(menuBeens.get(i).getMenuStr());
            tv_bigTv.setText(menuBeens.get(i).getMenuStr());
            tv_bigTvNote.setText(menuBeens.get(i).getNote());
            LinearLayout.LayoutParams layoutParams = new LayoutParams((int) getResources().getDimension(R.dimen.dp_1080p_180px),
                    (int) getResources().getDimension(R.dimen.dp_1080p_180px));
            itemView.setOnFocusChangeListener(new OnFocusChangeListener() {
                @Override
                public void onFocusChange(View v, boolean hasFocus) {
                    itemAnmi(v, hasFocus);
                }
            });
            addView(itemView, layoutParams);
        }
    }


    @Override
    protected int getChildDrawingOrder(int childCount, int i) {
        View focusedChild = this.getFocusedChild();
        int focusViewIndex = this.indexOfChild(focusedChild);
        logUtil.d_2("778899", "focusViewIndex=" + focusViewIndex);
        if (focusViewIndex < 0) {
            return i;
        }
        if (focusViewIndex == i) {
            return childCount - 1;
        } else if (i == childCount - 1) {
            return focusViewIndex;
        } else {
            return i;
        }
//        return super.getChildDrawingOrder(childCount, i);
    }

    private AnimatorSet bigAnimatorSet;
    private AnimatorSet smallAnimatorSet;
    private LayoutParams layoutParams;

    private void itemAnmi(final View v, boolean hasFocus) {//动画等对象可做复用等优化

        //做动画内容会扭曲
        invalidate();//必须得先调用，才会执行getChildDrawingOrder
        ObjectAnimator bigX = ObjectAnimator.ofFloat(v, "scaleX", 1f,  1.3333f);
        ObjectAnimator bigY = ObjectAnimator.ofFloat(v, "scaleY", 1f, 1.3333f);
        ObjectAnimator smallX = ObjectAnimator.ofFloat(v, "scaleX", 1.3333f, 1);
        ObjectAnimator smallY = ObjectAnimator.ofFloat(v, "scaleY", 1.3333f, 1);
        if (hasFocus) {
            bigAnimatorSet = new AnimatorSet();
            bigAnimatorSet.setDuration(500);
            bigAnimatorSet.playTogether(bigX, bigY);
            bigAnimatorSet.start();

            bigAnimatorSet.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {
                }

                @Override
                public void onAnimationEnd(Animator animation) {
//                    v.findViewById(R.id.ll_bigItem).setVisibility(VISIBLE);
//                    v.findViewById(R.id.ll_smallItem).setVisibility(GONE);
                }

                @Override
                public void onAnimationCancel(Animator animation) {
                }

                @Override
                public void onAnimationRepeat(Animator animation) {
                }
            });
        } else {
            smallAnimatorSet = new AnimatorSet();
            smallAnimatorSet.setDuration(500);
            smallAnimatorSet.playTogether(smallX, smallY);
            smallAnimatorSet.start();
            smallAnimatorSet.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) { }

                @Override
                public void onAnimationEnd(Animator animation) {
//                    v.findViewById(R.id.ll_bigItem).setVisibility(GONE);
//                    v.findViewById(R.id.ll_smallItem).setVisibility(VISIBLE);
                }

                @Override
                public void onAnimationCancel(Animator animation) {   }

                @Override
                public void onAnimationRepeat(Animator animation) { }
            });
        }

//另一种实现方法，可以实现正方形变化成长方形，不过由于不断的重绘，导致其他的view有闪烁
//        Menu menuSmall = new Menu(getResources().getDimension(R.dimen.dp_1080p_180px), getResources().getDimension(R.dimen.dp_1080p_180px), 0);
//        Menu menuBig = new Menu(getResources().getDimension(R.dimen.dp_1080p_400px), getResources().getDimension(R.dimen.dp_1080p_240px), 1);
//        if (hasFocus) {//放大
            v.findViewById(R.id.ll_bigItem).setVisibility(VISIBLE);
            v.findViewById(R.id.ll_smallItem).setVisibility(GONE);
//            ValueAnimator anim = ValueAnimator.ofObject(new ScallEvaluator(), menuSmall, menuBig);
//            anim.setDuration(300);
//            anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
//                @Override
//                public void onAnimationUpdate(ValueAnimator animation) {
//                    Menu currentMenu = (Menu) animation.getAnimatedValue();
//                    // 获得改变后的值
                    logUtil.d_2(TAG, "w=" + currentMenu.getWith() + "------h=" + currentMenu.getHight());
//                    logUtil.d_2(TAG, "big_alph=" + currentMenu.getAlph());
//                    if (v.getLayoutParams() == null) {
//                        layoutParams = new LayoutParams((int) currentMenu.getWith(), (int) currentMenu.getHight());
//                    } else {
//                        layoutParams = (LayoutParams) v.getLayoutParams();
//                        layoutParams.width = (int) currentMenu.getWith();
//                        layoutParams.height = (int) currentMenu.getHight();
//                    }
//                    v.findViewById(R.id.ll_bigItem).setAlpha(currentMenu.getAlph());
//                    v.findViewById(R.id.ll_smallItem).setAlpha(1 - currentMenu.getAlph());
//                    v.setLayoutParams(layoutParams);
//                }
//            });
//            anim.start();
//
//        } else {
            v.findViewById(R.id.ll_bigItem).setVisibility(GONE);
            v.findViewById(R.id.ll_smallItem).setVisibility(VISIBLE);
//            ValueAnimator anim = ValueAnimator.ofObject(new ScallEvaluator(), menuBig, menuSmall);
//            anim.setDuration(300);
//            anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
//                @Override
//                public void onAnimationUpdate(ValueAnimator animation) {
//                    Menu currentMenu = (Menu) animation.getAnimatedValue();
//                    // 获得改变后的值
                    logUtil.d_2(TAG,"w="+currentMenu.getWith()+"------h="+currentMenu.getHight());
//                    logUtil.d_2(TAG, "small_alph=" + currentMenu.getAlph());
//                    if (v.getLayoutParams() == null) {
//                        layoutParams = new LayoutParams((int) currentMenu.getWith(), (int) currentMenu.getHight());
//                    } else {
//                        layoutParams = (LayoutParams) v.getLayoutParams();
//                        layoutParams.width = (int) currentMenu.getWith();
//                        layoutParams.height = (int) currentMenu.getHight();
//                    }
//                    v.findViewById(R.id.ll_bigItem).setAlpha(currentMenu.getAlph());
//                    v.findViewById(R.id.ll_smallItem).setAlpha(1 - currentMenu.getAlph());
//                    v.setLayoutParams(layoutParams);
//                }
//            });
//            anim.start();
//        }
    }


    private void initMenus() {
        menuBeens = new ArrayList<>();
        HomeMenuBeen albumMenu = new HomeMenuBeen();
        albumMenu.setImgRes(R.mipmap.home_menu_album);
        albumMenu.setMenuStr("家庭相册");
        albumMenu.setNote("特别时刻，用心纪念");
        menuBeens.add(albumMenu);

        HomeMenuBeen avcallMenu = new HomeMenuBeen();
        avcallMenu.setImgRes(R.mipmap.home_menu_album);
        avcallMenu.setMenuStr("家庭相册");
        avcallMenu.setNote("特别时刻，用心纪念");
        menuBeens.add(avcallMenu);

        HomeMenuBeen mallMenu = new HomeMenuBeen();
        mallMenu.setImgRes(R.mipmap.home_menu_album);
        mallMenu.setMenuStr("家庭相册");
        mallMenu.setNote("特别时刻，用心纪念");
        menuBeens.add(mallMenu);

        HomeMenuBeen familyMenu = new HomeMenuBeen();
        familyMenu.setImgRes(R.mipmap.home_menu_album);
        familyMenu.setMenuStr("家庭相册");
        familyMenu.setNote("特别时刻，用心纪念");
        menuBeens.add(familyMenu);

        HomeMenuBeen aboutUs = new HomeMenuBeen();
        aboutUs.setImgRes(R.mipmap.home_menu_album);
        aboutUs.setMenuStr("家庭相册");
        aboutUs.setNote("特别时刻，用心纪念");
        menuBeens.add(aboutUs);
    }
}

XML:R.layout.menu_home_item(这里做两种布局的切换，实际情况自行考虑)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:focusable="true"
    android:clickable="true"
android:layout_width="@dimen/dp_1080p_180px"
android:layout_height="@dimen/dp_1080p_180px">

<LinearLayout
    android:id="@+id/ll_bigItem"
    android:layout_centerInParent="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/home_menubg_album"
    android:gravity="center"
    android:orientation="horizontal"
    android:visibility="visible">

    <ImageView
        android:id="@+id/img_big"
        android:layout_width="@dimen/dp_72"
        android:layout_height="@dimen/dp_1080p_62px"
        android:layout_marginRight="@dimen/dp_1080p_20px"
        android:src="@mipmap/home_menu_album" />

    <LinearLayout
        android:id="@+id/ll_bigTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <liyueyun.familytv.tv.ui.widget.TextViewNoPad
            android:id="@+id/tv_bigTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="家庭相册"
            android:textSize="@dimen/sp_1080p_50px" />

        <TextView
            android:id="@+id/tv_bigTvNote"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="特别时刻，用心纪念"
            android:textSize="@dimen/sp_1080p_20px" />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/ll_smallItem"
    android:layout_centerInParent="true"
    android:background="@mipmap/home_menubg_album"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:visibility="visible">

    <ImageView
        android:id="@+id/img_small"
        android:layout_width="@dimen/dp_1080p_62px"
        android:layout_height="@dimen/dp_1080p_52px"
        android:src="@mipmap/home_menu_album" />

    <TextView
        android:id="@+id/tv_smallTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="家庭相册"
        android:textSize="@dimen/sp_1080p_20px" />

    </LinearLayout>
</RelativeLayout>
build hero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android TV (三)（创建电视页面布局）
fengfancky的博客
12-14 3239
官方地址 镜像地址创建电视页面布局用户通常在距离电视屏幕10英尺的位置观看，并且它远远大于大多数Android设备的显示屏，但是这种类型的屏幕不能提供与小屏幕相同级别的细节和颜色。这些因素要求你为电视设备创建应用布局时，能创造一个有效的和愉快的用户体验。使用布局主题Android主题能为你的应用提供基础的布局。您应该使用一个主题来修改您的应用程序的activity的显示，这意味着这些activity
一起撸个简单粗暴的Tv应用主界面的网格布局控件（下）
weixin_33845477的博客
05-02 1万+
上一篇中我们已经一起学了怎么简单粗暴的撸个支持动态布局的网格控件出来，但在上一篇的介绍中，并没有学习实现网格控件的滑动效果，所以本篇就来讲讲，要如何让我们的网格控件可以支持自定义滑动策略。 效果 图一是Tv应用：当贝市场的主页 图二是咱自己撸的简单粗暴的 Tv 应用主界面网格控件：TvGridLayout 的示例，每个 Tab 下，每一屏的卡位大小、位置都是动态计算出来的。 实现 第一步：定义...
android tv 长布局,学习Andriod开发之智能TV优化Android使用界面布局教程
weixin_39860583的博客
05-26 307
一般来说，运用传统的界面控件元素，合理设计布局，能够设计出比较中规中矩的标准界面;利用一些换肤的控件或者部分界面组件，能够设计出相对好看一些的界面效果，不过随着界面控件的组件发展，目前一般倾向于是用较为大型的控件组，他们除了提供设计得体的界面控件外，还提供了非常多种绚丽多彩的界面样式供选择。但无论界面设计如何变化，一般基本原则都是为客户提供直观、易用、体验效果较好的界面效果。智能TV优化Andro...
android tv 长布局,高手的学习笔记！给Android TV做设计要注意的16个细节
weixin_29881131的博客
05-26 426
@平行煎餅：虽然同样是安卓系统，设计TV这种大屏幕的应用程序和设计手机平板等其它设备不太一样，需要注意一些点。1. 在Material Design的基础上进行设计可以使不同平台的应用保持一致性：相同的外观和相同的使用体验，令用户有熟悉感，而且Material Design也给用户提供了愉悦和实用的体验。2. 易操作的界面内容应该是电视应用的核心，用户不用在屏幕上阅读文字信息也能轻松操作；并且，视...
Test_menu.rar_TV
09-14
用upd6464 给TV信号 加叠加字符
自定义view之卫星menu
10-13
简单的自定义view实现卫星菜单 下方一个图片点击弹出一系列菜单
佳能Quick Menu v2.3.0 最新版
07-12
佳能QuickMenu软件将能够解决佳能扫描仪驱动难题，让你能够处理扫描仪的各类问题，拥有一键扫描控制的效果，通过驱动控制扫描能够带来更加方便的使用效果！...另外，安装MyImageGarden后，,欢迎下载体验
android界面布局之实现文本块布局效果示例
01-20
import android.view.Menu;import android.view.MotionEvent;import android.view.View;import android.widget.TextView;import android.widget.Toast; public class MainActivity extends Activity { private int...
el_menu-master.zip
08-21
VUE前后端分离动态菜单，使用el_menu的完整示例。
重写getChildDrawingOrder，让gridview倒序绘制item
DvLee
03-19 3729
最近要实现一个效果，gridview每个item加上动画，发现每个item都会被后面的item挡住，重写viewgroup的这个方法可实现倒叙绘制item，让后面的item绘制在前面item的底部。 public class MyGridView extends GridView { public MyGridView(Context context, AttributeSet
ViewGroup getChildDrawingOrder与焦点Focus放大遮挡
u011562187的专栏
08-25 842
做AndroidTV项目时，通常都会要实现如下图的功能，某个控件获取焦点后放大，并且显示在最上层。 默认是会被遮挡的
android控件显示顺序控制
热门推荐
viclee
10-24 1万+
在android中如果首先在xml中静态添加了一个控件，剩下的控件都是通过addView动态添加，那么如果有控件覆盖的情况（比如说使用FrameLayout或者RelativeLayout），先加入得控件就会被后加入得控件覆盖。 在View类中有这样一个方法 bringToFront ，它得注释如下：      /**      * Change the view's z order in
添加 自定义的view，并显示在最前端
woshidaniu的专栏
11-07 1039
View view1=new View(MainActivity.this); int x=getResources().getDisplayMetrics().widthPixels; int y=getResources().getDisplayMetrics().heightPixels; view1.setX(100)
RelativeLayout把指定控件位于最上层
qq_28335347的博客
03-26 1万+
xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background=
View的测量、布局和绘制过程中父View(当前View)和子View的先后顺序
tinyVampire的博客
07-01 2044
文章目录View的测量、布局和绘制过程中父View(当前View)和子View的先后顺序onMeasure过程LinearLayout#onMeasureLinearLayout#measureChildBeforeLayoutLinearLayout#measureChildWithMargins方法：ViewGroup#getChildMeasureSpec方法View#measureonLa...
Android 自定义拼接图片，点击小图位置时，绘制在上层
dawuafang
05-04 269
这里将五张矩形图拼在同一图层，并使用paint.setXfermode，显示点击区域上的图层 备注:如果使用圆形图片素材(即圆形外是透明背景)，那么需要用圆形的碰撞检测。 package com.stone.guaguaka.view; import android.content.Context; import android.graphics.Bitmap; import...
Android ViewGroup指定子View的绘制顺序
qq_21763489的博客
10-23 2583
ViewGroup及其子类如果要想指定子View的绘制顺序只需两步: 1，setChildrenDrawingOrderEnabled(true) 开启自定义子View的绘制顺序; 2，用setZ(float),自定义Z值，值越大越优先绘制；
el-dropdown显示在最上层
最新发布
06-06
如果您使用的是 Element UI 中的 el-dropdown 组件，可以通过设置 z-index 属性来让其显示在最上层。例如： ```html <!-- dropdown menu content --> ``` 其中，z-index 属性的值可以根据您的实际需求进行调整...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值