Home | 简体中文 | 繁体中文 | 杂文 | Github | 知乎专栏 | Facebook | Linkedin | Youtube | 打赏(Donations) | About
113.7. Widgets
上一页 第 113 章 Palette 视觉设计 下一页
知乎专栏

113.7. Widgets

113.7.1. ImageView

全屏显示

			
android:scaleType="matrix"

水平居中显示 android:layout_gravity="center"

			
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        app:srcCompat="@drawable/niboer"
        tools:ignore="MissingConstraints" />

113.7.1.1. 剧中效果

android:scaleType="fitCenter"

			
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        app:srcCompat="@drawable/fo2"
        tools:ignore="MissingConstraints" />

113.7.1.2. 保持长宽比例

			
android:adjustViewBounds="true"

113.7.1.3. ImageView 显示 URL 图片

方法一

			
   private Drawable getImageDrawableFromUrl(String url) {
        try {
            InputStream inputStream = (InputStream) new URL(url).getContent();
            Drawable drawable = Drawable.createFromStream(inputStream, "image.jpg");
//            Drawable drawable = Drawable.createFromStream(new URL(url).openStream(), "image.jpg");
//            Drawable drawable = Drawable.createFromStream(getContext().getContentResolver().openInputStream(Uri.parse(url)), null);

            return drawable;
        } catch (IOException e) {
            Log.d("VoicePopup", e.getMessage());

        } catch (Exception e) {
            Log.d("VoicePopup", e.getMessage());
        }
        return null;
    }
    			
    Drawable drawable = getImageDrawableFromUrl(image);
    imageView = findViewById(R.id.imageView);
    imageView.setImageDrawable(drawable);

方法二

			
	imageView = findViewById(R.id.imageView);
       
    new Thread(new Runnable() {
        @Override
        public void run() {
            try {
                InputStream is = (InputStream) new URL(image).getContent();
                final Drawable d = Drawable.createFromStream(is, null);
                getActivity().runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        imageView.setImageDrawable(d);
                    }
                });
            } catch (Exception e) {
            }
        }
    }).start();	
            
            
	new Thread(new Runnable() {
	    @Override
	    public void run() {
	        try {
	            InputStream inputStream = new URL("https://img.netkiller.cn/2d/f4873238-7860-11ee-8344-0242ac12000c.png").openStream();
	            final Drawable drawable = Drawable.createFromStream(inputStream, null);
	            runOnUiThread(new Runnable() {
	                @Override
	                public void run() {
	                    imageView.setImageDrawable(drawable);
	                }
	            });
	        } catch (Exception e) {
	        }
	    }
	}).start();

方法三

			
	try {
	    URL url = new URL("https://img.netkiller.cn/2d/f4873238-7860-11ee-8344-0242ac12000c.png");
	
	    new Thread(new Runnable() {
	        @Override
	        public void run() {
	            Bitmap bitmap = null;
	            try {
	                bitmap = BitmapFactory.decodeStream(url.openStream());
	                showImg(bitmap);
	
	            } catch (IOException e) {
	                e.printStackTrace();
	            }
	
	        }
	    }).start();
	} catch (MalformedURLException e) {
	    e.printStackTrace();
	}


    private void showImg(final Bitmap bitmap) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                imageView.setImageBitmap(bitmap);
            }
        });
    }

113.7.1.4. 动画

参数

  • android:oneshot 代表播放次数 true 只展示一遍，设置为false会不停的循环播放动画
  • android:duration 表示展示所用的该图片的时间长度 
		
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">

    <item
        android:drawable="@drawable/hotel1"
        android:duration="150" />
    <item
        android:drawable="@drawable/hotel2"
        android:duration="150" />
    <item
        android:drawable="@drawable/hotel3"
        android:duration="150" />
    <item
        android:drawable="@drawable/hotel4"
        android:duration="150" />
    <item
        android:drawable="@drawable/hotel5"
        android:duration="150" />
</animation-list>
		
			

		
	<ImageView
    android:id="@+id/load_image"
    android:layout_width="25dp"
    android:layout_height="25dp"
    android:layout_gravity="center_vertical"
    android:scaleType="centerCrop"
    android:src="@drawable/loading_anim_image" />		
		
			

		
    ImageView imageView = findViewById(R.id.imageView);
    animationDrawable = (AnimationDrawable) imageView.getDrawable();
    //直接就开始执行，性能不是最佳的。
    animationDrawable.start();

113.7.1.5. 唱片播放效果（旋转PNG图片）

旋转 PNG 动画效果，用于显示唱片播放效果

UI 布局
				
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context="cn.netkiller.album.MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        app:srcCompat="@drawable/fo2"
        tools:ignore="MissingConstraints" />

    <cn.netkiller.album.view.SoundWaveView
        android:id="@+id/sound_wave_view"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignBottom="@id/imageView"
        app:layout_constraintBottom_toBottomOf="@+id/imageView" />

    <ImageView
        android:id="@+id/imageViewWan"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        app:layout_constraintBottom_toTopOf="@+id/sound_wave_view"
        app:layout_constraintEnd_toEndOf="@+id/sound_wave_view"
        app:layout_constraintStart_toStartOf="@+id/sound_wave_view"
        app:srcCompat="@drawable/wan"
        tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
旋转动画效果文件

创建旋转动画效果 res/anim/rotate.xml

				
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:toDegrees="359"></rotate>
</rotate>
启动旋转效果
				
        Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);
        LinearInterpolator linearInterpolator = new LinearInterpolator();
        rotateAnimation.setInterpolator(linearInterpolator);
        View imageViewWan = findViewById(R.id.imageViewWan);
        imageViewWan.startAnimation(rotateAnimation);

113.7.1.6. 动画播放

			
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageViewFigure"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/animation_speak"
        tools:ignore="MissingConstraints" />

</androidx.constraintlayout.widget.ConstraintLayout>
			
			
			
    <FrameLayout
        android:id="@+id/frameLayoutFigure"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"
        android:layout_marginBottom="60dp"
        android:fitsSystemWindows="true"
        android:visibility="gone">

        <include
            layout="@layout/figure"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </FrameLayout>
			
			
			
package cn.netkiller.student.fragment;

import android.graphics.drawable.AnimationDrawable;
import android.util.Log;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;

import androidx.annotation.DrawableRes;

import cn.aigcsst.student.R;

public class AnimationFigure {
    private static final String TAG = AnimationFigure.class.getSimpleName();
    private final View view;
    private final ImageView imageViewFigure;
    private final FrameLayout frameLayoutFigure;
    private final AnimationDrawable animationDrawable;

    public AnimationFigure(View view, @DrawableRes int resId) {
        this.view = view;
        this.imageViewFigure = view.findViewById(R.id.imageViewFigure);
//        this.imageViewFigure.setImageResource(resId);
        this.imageViewFigure.setBackgroundResource(resId);
        this.frameLayoutFigure = view.findViewById(R.id.frameLayoutFigure);
//        this.animationDrawable = (AnimationDrawable) this.imageViewFigure.getDrawable();
        this.animationDrawable = (AnimationDrawable) this.imageViewFigure.getBackground();
    }

    public void start() {
        animationDrawable.start();
        this.frameLayoutFigure.setVisibility(View.VISIBLE);

    }

    public void stop() {
        animationDrawable.stop();
        this.frameLayoutFigure.setVisibility(View.INVISIBLE);

    }

    public void animationFigure() {

        AnimationDrawable animationDrawable = (AnimationDrawable) imageViewFigure.getDrawable();

        if (animationDrawable.isRunning()) {
            animationDrawable.stop();
            frameLayoutFigure.setVisibility(View.INVISIBLE);
        } else {
            animationDrawable.start();
            frameLayoutFigure.setVisibility(View.VISIBLE);
        }
        Log.d(TAG, "animationFigure: " + animationDrawable.isRunning());
        Log.d(TAG, "animationFigure isActivated: " + imageViewFigure.isActivated());
    }


//    public static void animationFigure(View view, AnimationFigure action) {
//        ViewSwitcher viewSwitcherFigure = view.findViewById(R.id.viewSwitcherFigure);
//        ImageView imageViewFigure = null;
//        if (action == AnimationFigure.SPEAKING) {
//            viewSwitcherFigure.setDisplayedChild(0);
//            imageViewFigure = view.findViewById(R.id.imageViewFigureSpeak);
////            imageViewFigure.setImageResource(R.drawable.animation_loading);
//        } else {
//            viewSwitcherFigure.setDisplayedChild(1);
////            imageViewFigure.setImageResource(R.drawable.animation_speak);
//            imageViewFigure = view.findViewById(R.id.imageViewFigureListening);
//        }
//        AnimationDrawable animationDrawable = (AnimationDrawable) imageViewFigure.getDrawable();
//
//        FrameLayout frameLayoutFigure = view.findViewById(R.id.frameLayoutFigure);
//        Log.d(TAG, "animationFigure: " + animationDrawable.isRunning());
//        Log.d(TAG, "animationFigure isActivated: " + imageViewFigure.isActivated());
//
//        if (animationDrawable.isRunning()) {
//            animationDrawable.stop();
//            frameLayoutFigure.setVisibility(View.INVISIBLE);
//        } else {
//            animationDrawable.start();
//            frameLayoutFigure.setVisibility(View.VISIBLE);
//        }
//        Log.d(TAG, "animationFigure: " + animationDrawable.isRunning());
//        Log.d(TAG, "animationFigure isActivated: " + imageViewFigure.isActivated());
//    }

    public enum Figure {
        LISTENING, SPEAKING
    }


}

113.7.2. TextClock

		
  <TextClock
            android:id="@+id/textClockTime"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:format12Hour="hh:mm"
            android:format24Hour="HH:mm"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="40sp"
            android:textStyle="bold" />

        <TextClock
            android:id="@+id/textViewDate"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:format12Hour="yyyy/MM/dd E"
            android:format24Hour="yyyy/MM/dd E"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="16sp" />		
		
		
		
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <TextClock
                        android:id="@+id/textClockTime"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#00000000"
                        android:format24Hour="HH:mm"
                        android:gravity="center"
                        android:textColor="@color/white"
                        android:textSize="48sp" />

                    <TextClock
                        android:id="@+id/textViewDate"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:format12Hour="MM月dd日 EEEE"
                        android:format24Hour="MM月dd日 EEEE"
                        android:gravity="center"
                        android:textColor="#70ffffff"
                        android:textSize="16sp" />
                </LinearLayout>

113.7.3. 进度条

113.7.3.1. ProgressBar

style属性：

		
@android:style/Widget.ProgressBar.Horizontal：水平进度条
@android:style/Widget.ProgressBar.Inverse：普通大小的进度条
@android:style/Widget.ProgressBar.Large：大环形进度条
@android:style/Widget.ProgressBar.Large.Inverse：大环形进度条
@android:style/Widget.ProgressBar.Small：小环形进度条
@android:style/Widget.ProgressBar.Small.Inverse：小环形进度条

案例

		
    <ProgressBar
        android:id="@+id/progressBar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="13dp"
        android:progress="0"
        android:visibility="invisible"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="179dp" />

113.7.3.2. 定义进度条样式

			
    <ProgressBar
        android:id="@+id/progressBar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="13dp"
        android:max="100"
        android:maxHeight="32dip"
        android:minHeight="32dip"
        android:progress="0"
        android:progressDrawable="@drawable/progress"
        android:progressTint="#43A047"
        android:visibility="invisible"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="179dp" />	
			
			
			
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置背景色 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="20dp"></corners>
            <solid android:color="#CCCCCC"></solid>
        </shape>
    </item>
    <!-- 设置进度条颜色 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:angle="45"
                    android:endColor="#2DC8FE"
                    android:startColor="#149EFF"></gradient>
                <!-- 设置圆角 -->
                <corners android:radius="20dp"></corners>
            </shape>
        </clip>
    </item>
</layer-list>
上一页 上一级 下一页
113.6. Switch 起始页 113.8. Containers