Home | 简体中文 | 繁体中文 | 杂文 | Github | 知乎专栏 | Facebook | Linkedin | Youtube | 打赏(Donations) | About
知乎专栏

7.7. Widgets

7.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" />			
			
		

7.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" />			
			
			

7.7.1.2. 保持长宽比例

			
android:adjustViewBounds="true" 			
			
			

7.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);
            }
        });
    }
			
			

7.7.1.4. 唱片播放效果(旋转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);				
				
				

7.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>		
		
		

7.7.3. 进度条

7.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" />		
		
		

7.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>	
			
			

7.7.4. ListView

7.7.4.1. Array

			
        String[] list = Arrays.asList("Apple", "Banana", "Orange", "Watermelon",
                "Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango";
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1,data);
        ListView listView = (ListView) findViewById(R.id.history);
        listView.setAdapter(adapter);	
			
			
			
    <ListView
        android:id="@+id/history"
        android:layout_width="368dp"
        android:layout_height="444dp"
        android:scrollbars="horizontal"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="59dp" />	
			
			

7.7.4.2. List

			
		List<String> list = Arrays.asList("Apple", "Banana", "Orange", "Watermelon","Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango");
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1,list);
        ListView listView = (ListView) findViewById(R.id.history);
        listView.setAdapter(adapter);        		
			
			

7.7.4.3. setOnItemClickListener()

			
        List<String> list = Arrays.asList("Text 文本", "URL 网址", "电话号码", "短信","开启应用", "地址", "日历", "图片", "邮箱", "GPS 坐标");
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,list);
        final ListView listView = (ListView) findViewById(R.id.schemaList);
        listView.setAdapter(adapter);


        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                String text = listView.getItemAtPosition(position)+"";
                Log.e("WRITE","position="+position+", text="+text);
            }
        });	
			
			

7.7.4.4. 用接口方法实现

		
public class MainActivity extends Activity implements OnItemClickListener, OnScrollListener
		
			
		
		List<String> list = Arrays.asList("Text 文本", "URL 网址", "电话号码", "短信","开启应用", "地址", "日历", "图片", "邮箱", "GPS 坐标");
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,list);
        final ListView listView = (ListView) findViewById(R.id.schemaList);
        listView.setAdapter(adapter);
        
        listView.setOnItemClickListener(this);
        listView.setOnScrollListener(this);		
		
			
		
	@Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        String text = listView.getItemAtPosition(position)+"";
        Log.e("WRITE","position="+position+", text="+text);
    }		
		
			
		
	@Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {

        switch (scrollState) {
        case SCROLL_STATE_FLING:
            Log.i("tag", "用户手指离开屏幕后,因惯性继续滑动");
            Map<String,Object>map = new HashMap<String,Object>();
            map.put("icon", R.drawable.ic_launcher);
            map.put("text", "新增加项目");
            dataList.add(map);  
            adapter.notifyDataSetChanged(); 
            break;
        case SCROLL_STATE_IDLE:
            Log.i("tag","已经停止滑动");
            break;      
        case SCROLL_STATE_TOUCH_SCROLL:
            Log.i("tag", "手指未离开屏幕,屏幕继续滑动");
            break;
        }   
    }