android中实现指针滑动的动态效果

本次实现的是类似于墨迹天气中轨迹图片上指针随着数值滚动滑动的效果,基本思路是开启线程,控制指针所在的imageview控件的padding属性。

  <FrameLayout

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:background="#fff"

            android:paddingBottom="5dp"

            android:paddingLeft="5dp"

            android:paddingRight="2dp"

            >



            <ImageView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_gravity="right"

                android:src="@drawable/up_icon"

                android:layout_marginTop="0dp"

                android:paddingTop="0dp" />



            <LinearLayout

                android:layout_width="240dip"

                android:layout_height="wrap_content"

                android:layout_marginLeft="5dp"

                android:layout_marginRight="7dp"

                android:orientation="horizontal" >



                <TextView

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:gravity="left"

                    android:text="优"

                    android:textSize="12sp" />



                <TextView

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:gravity="left"

                    android:text="良"

                    android:textSize="12sp" />



                <TextView

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:gravity="left"

                    android:text="中等"

                    android:textSize="12sp" />



                <TextView

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:gravity="left"

                    android:text="不健康"

                    android:textSize="12sp" />



                <TextView

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:gravity="left"

                    android:text="有毒害"

                    android:textSize="12sp" />

            </LinearLayout>

            

            

            <LinearLayout

                android:layout_width="240dip"

                android:layout_height="wrap_content"

                android:layout_marginLeft="5dp"

                android:layout_marginRight="7dp"

                android:layout_marginTop="40dp"

                android:orientation="horizontal" >



                <TextView

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:gravity="center_horizontal"

                    android:text="80"

                    android:textSize="12sp" />



                <TextView

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:gravity="center_horizontal"

                    android:text="120"

                    android:textSize="12sp" />



                <TextView

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:gravity="center_horizontal"

                    android:text="160"

                    android:textSize="12sp" />



                <TextView

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:gravity="center_horizontal"

                    android:text="200"

                    android:textSize="12sp" />



                <TextView

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:gravity="center_horizontal"

                    android:text="400"

                    android:textSize="12sp" />

            </LinearLayout>



            <ImageView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginLeft="10dp"

                android:layout_marginTop="10dp"

                android:src="@drawable/zhizhen"

                android:id="@+id/zhizhen"/>



            <ImageView

                android:id="@+id/dengji_img"

                android:layout_width="250dip"

                android:layout_height="wrap_content"

                android:layout_marginTop="25dp"

                android:src="@drawable/dengji_icon" />

        </FrameLayout>

上面这段代码实现的布局为

首先,因为指针有压着下面的滚动条,因此这是一个framelayout的布局。其次,要实现指针的匀速滚动,需要开启一个线程,在线程中能够实现利用循环,以及线程的休眠,通过控制指针所在图标的padding属性来实现滚动的动画效果

    Handler myHandler =new Handler(){



        @Override

        public void handleMessage(Message msg) {

            // TODO Auto-generated method stub

            super.handleMessage(msg);

            //对于c的更改和循环应该是在线程中跑,要不run仅仅执行一次,            

            zhizhen.setPadding(c, 0, 0, 0);

        }

         

        

    };

    class MyThread extends Thread{



        @Override

        public void run() {

            //发送一个消息,通知主线程改变UI

         try {

            

             while(c<=input){

                 c=c+1;

                 this.sleep(10);

                 myHandler.sendEmptyMessage(0);                 

             }

             

                

        } catch (InterruptedException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        }

 为了控制指针滑动的距离和对应的数值相对应,可以采用以下方法,通过比例来进行控制:

    class myTh extends Thread {

        @Override

        public void run() {

            super.run();

            length_margin = dengji_width - zhizhen_width;

            if (aqi < 200) {

                Float aqi_proportion = (float) aqi / 300;

                margin_length = (float) aqi_proportion * length_margin;

            }

            if (aqi >= 200 && aqi < 300) {

                Float aqi_proportion = (float) 200 / 300;

                Float margin = (float) aqi_proportion * length_margin;

                margin_length = margin + (float) (aqi - 200) / 2 / 300

                        * length_margin;

            }

            if (aqi >= 300) {

                Float aqi_proportion = (float) 270 / 300;

                margin_length = (float) aqi_proportion * length_margin;

            }

            // if(i/300>1 && i%300>0){

            // }

            c = 0;

            while (c <= margin_length) {

                c = c + 1;

                try {

                    Thread.sleep(2);

                    handler.sendEmptyMessage(0);

                } catch (InterruptedException e) {

                    e.printStackTrace();

                }

            }

        }

    }

 

 

你可能感兴趣的:(android)