android帧布局实现跑马灯

定义颜色值

values目录中创建colors

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorname1">#ff0000</color>  
    <color name="colorname2">#ff0020</color>  
    <color name="colorname3">#ff0040</color>  
    <color name="colorname4">#ff0060</color>  
    <color name="colorname5">#ff0080</color>  
    <color name="colorname6">#ff00a0</color>  
    <color name="colorname7">#ff00c0</color>
    <color name="colorname8">#ff00ff</color>
</resources>

布局的定义layout下

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
  <TextView  
        android:id="@+id/color0"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_gravity="center"  
        android:background="#ff20ff"  
        android:height="200dp"  
        android:width="200dp" />  
    <TextView  
        android:id="@+id/color1"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_gravity="center"  
        android:background="#ff20c0"  
        android:height="180dp"  
        android:width="180dp" />  
    <TextView   
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_gravity="center"  
        android:width="160dp"  
        android:height="160dp"  
        android:background="#ff20a0"  
        android:id="@+id/color2"/>  
    <TextView   
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:width="140dp"  
        android:height="140dp"  
        android:layout_gravity="center"  
        android:background="#ff2080"  
        android:id="@+id/color3"/>  
    <TextView   
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:width="120dp"  
        android:height="120dp"  
        android:layout_gravity="center"  
        android:background="#ff2060"  
        android:id="@+id/color4"/>  
    <TextView   
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:width="100dp"  
        android:height="100dp"  
        android:layout_gravity="center"  
        android:background="#ff2040"  
        android:id="@+id/color5"/>  
    <TextView   
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:width="80dp"  
        android:height="80dp"  
        android:layout_gravity="center"  
        android:background="#ff2020"  
        android:id="@+id/color6"/>  
    <TextView   
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:width="60dp"  
        android:height="60dp"  
        android:layout_gravity="center"  
        android:background="#ff2000"  
        android:id="@+id/color7"/>
</FrameLayout>

类中代码的实现

package cn.csdn.class3g;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
public class LampChangeActivity extends Activity {

     //从R.JAVA类中获取颜色值
     private int[] colornames=new int[]{
             R.color.colorname8,  
             R.color.colorname7,  
             R.color.colorname6,  
             R.color.colorname5,  
             R.color.colorname4,  
             R.color.colorname3,  
             R.color.colorname2,  
             R.color.colorname1,  
       };  

      //获取颜色布局
      private int[] colors=new int[]{  
              R.id.color0,  
              R.id.color1,  
              R.id.color2,  
              R.id.color3,  
              R.id.color4,  
              R.id.color5,  
              R.id.color6,
              R.id.color7
      };  
      View view[]=new View[8];  //创建view视图
      public void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.main);  
            for(int i=0;i<8;i++){  
                view[i]=(View) findViewById(colors[i]);  
            }  //循环获取颜色边框
            final MyHandler myHandler=new MyHandler();  
            myHandler.sleep(100);  //停歇100毫秒
        }
      class MyHandler extends Handler{  
        int i=0;  
        public void handleMessage(Message msg){  
            i++;  
            if(i>=7){  
                i=1;  
            }  
            for(int m=8-i,n=0;m<8;m++,n++){  
                view[m].setBackgroundResource(colornames[n]);  
            }  //背景循环渐变
            for(int m=0;m<8-i;m++){  
                view[m].setBackgroundResource(colornames[m+i]);  
            }  
             // 背景变化完更新
            sleep(100);  
        }  
        public void sleep(int j){         
                sendMessageDelayed(obtainMessage(0),j);           
        }  
      }  

}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用flex布局实现跑马灯效果,可以按照以下步骤进行操作: 1. 首先,在HTML中创建一个具有固定宽度和高度的容器,例如div标签,并赋予其一个唯一的类名,比如"carousel-container"。 2. 在该容器内,创建一个包含图片的子容器,例如ul标签,并赋予其一个唯一的类名,比如"carousel-list"。 3. 在"carousel-list"容器中,使用flex布局将其子元素水平排列。可以通过设置"display: flex"和"flex-direction: row"来实现。 4. 确保每个子元素都具有相同的宽度和高度,以便它们能够在同一行中显示。 5. 对于在跑马灯中显示的图片,可以使用img标签将其包裹,并设置适当的宽度和高度。 6. 使用JavaScript或Vue等框架,将图片的URL存储在一个数组中。 7. 使用循环语句(如v-for)遍历该数组,并为每个图片创建一个列表项(li标签)。 8. 在CSS中,为"carousel-container"容器设置合适的宽度和高度,以及overflow属性为hidden,以确保只显示容器内部的内容。 9. 使用CSS的animation属性和@keyframes规则,实现图片在容器内水平滚动的动画效果。 10. 最后,通过调整动画的持续时间和延迟时间,以及设置无限循环,来实现完整的跑马灯效果。 下面是一个使用flex布局实现跑马灯效果的示例代码: HTML: ```html <div class="carousel-container"> <ul class="carousel-list"> <li v-for="(image, index) in carouselImages" :key="index"> <img :src="image" alt="carousel-image" width="200px" height="200px"> </li> </ul> </div> ``` CSS: ```css .carousel-container { width: 100%; height: 200px; overflow: hidden; } .carousel-list { display: flex; flex-direction: row; animation: carousel-animation 10s infinite linear; } .carousel-list li { width: 200px; height: 200px; margin-right: 10px; } @keyframes carousel-animation { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } ``` JavaScript/Vue: ```javascript export default { data() { return { carouselImages: [ "https://t1.picb.cc/uploads/2019/05/30/giNfLi.md.jpg", "https://i.loli.net/2019/05/29/5cee3e9cd3a1a11937.jpg", "https://i.loli.net/2019/05/29/5cee3f031451617189.jpg", "https://i.loli.net/2019/05/29/5cee3f032577c34451.jpg", "https://i.loli.net/2019/05/29/5cee3f78e138834786.jpg", "https://i.loli.net/2019/05/29/5cee3f78e644247723.jpg" ] }; } }; ``` 这样,你就可以使用flex布局实现一个简单的跑马灯效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [flex布局实现上下固定中间滑动的布局方式](https://download.csdn.net/download/weixin_38702515/13127966)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Element-ui初探——容器、走马灯、flex布局](https://blog.csdn.net/weixin_41777814/article/details/115130520)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值