Android自帶Switch系列彙總學習

介紹

本博客主要是介紹了一下幾種控件的使用：

• Switch
• SwitchCompat
• ImageSwitcher
• TextSwitcher
• ViewSwitcher

Switch的使用

• 先看效果圖
  

如上圖所示：是在Android 4.4版本上運行展示效果

如上圖所示：是Android 5.0以上運行的效果圖
可以看出來，在不同的版本上會有不同的效果

• 在xml文件中：

  <Switch
      android:id="@+id/mySwitch"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textOn="打開"
      android:textOff="關閉"
      />
  
      其中，textOn表示：打開時候展示什麼內容，
      textOff表示：關閉時候展示什麼內容 

• 代碼

  mySwitch = (Switch) findViewById(R.id.mySwitch);
  //添加點擊事件
  mySwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
          @Override
          public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
              if (isChecked){
                  Toast.makeText(MainActivity.this,"選擇是"+isChecked,Toast.LENGTH_SHORT).show();
              }else {
                  Toast.makeText(MainActivity.this, "選擇是"+isChecked, Toast.LENGTH_SHORT).show();
              }
          }
      });
   //表示可以在裏面完成相關操作

SwitchCompat

這個存在的意義，是爲了兼容5.0一下Switch控件，因爲Switch在5.0以後好看，但是5.0一下還是不好看，所以存在了這個兼容包

• xml文件

<android.support.v7.widget.SwitchCompat
        android:id="@+id/switchcompat"
        android:textOff="關閉"
        android:textOn="打開"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

需要注意的是，相對於Switch(指的是Switch具有的方法，它都存在)，他額外提供了修改顏色的方法。在style中，添加代碼，效果如下（並不是在AppTheme主題中修改，在AppTheme主題中修改最低api要21，這裏就是自己建立一個新的就可以了）

           <style name="message_switch" parent="Theme.AppCompat.Light">
        <!-- switch 打開時的按鈕的顏色 軌跡顏色默認爲30%（看效果就明白30%是怎麼回事了）這個顏色 -->
        <item name="colorControlActivated">@color/switch_color_on</item>
        <!--  switch關閉時的按鈕的顏色 -->
        <item name="colorSwitchThumbNormal">@color/switch_color_off</item>
        <!-- switch關閉時的軌跡的顏色 30%這個顏色 -->
        <item name="android:colorForeground">@color/switch_color_gui</item>
    </style>

       <color name="sss">#3ce137</color>
       <color name="hhh">#ec0dec</color>
       <color name="xxx">#0b0b0b</color>

需要注意的是，在使用style文件時候，不能直接android:theme=”@style/mine_Switch”/
也不能直接：
style = “@style/mine_Switch”
應該是：
app:theme=”@style/message_switch”

再這裏，不僅可以通過改變顏色從而改變開關的樣式，還可以設置某些圖片，感興趣的可以自己試試：
        switch1.setTrackResource();
        switch1.setThumbResource();

• 改變了按鈕的顏色之後效果：

上面照片是運行在4.4系統下關閉的效果

上面照片是運行在4.4系統下打開的效果

ImagerSwitcher

Goolge體統的一個可以顯示圖片的一個組件，不同的是，你可以設置動畫效果看看下面的效果圖

• xml

    <ImageSwitcher
        android:id="@+id/imageSwitcher"
        android:layout_width="200dp"
        android:layout_height="100dp">
    </ImageSwitcher>

• 代碼

 int[] images = {R.drawable.first,R.drawable.second,R.drawable.third};//圖片資源數組

 imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
 imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {//設定工廠，每進來一個圖片都用一個ImageView接收
            @Override
            public View makeView() {
                return new ImageView(MainActivity.this);
            }
        });//這個設置Factory是必須的
        imageSwitcher.setImageResource(images[position]);//設置初始圖片,也是通過這個代碼設置在控件上顯示的圖片
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));//動畫淡入
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));//動畫淡出

        //這裏用的是系統提供的動畫效果

但是不好的地方是，只能展示圖片，

TextSwitcher

正如其顯示的，TextSwitcher,爲了展示文本的，可以帶有動畫的切換文本。

• 效果圖
  

• xml

<TextSwitcher
        android:id="@+id/textSwitcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

• 代碼

textSwitcher = (TextSwitcher) findViewById(R.id.textSwitcher);
Animation in = AnimationUtils.loadAnimation(this, R.anim.myanim);
in.setDuration(1000);
        //爲了突出動畫效果，我們設置動畫事件爲1秒鐘
in.setFillAfter(true);
Animation out = AnimationUtils.loadAnimation(this, R.anim.mysss);
out.setDuration(1000);
in.setFillAfter(false);
textSwitcher.setInAnimation(in);
textSwitcher.setOutAnimation(out);

展示隨機值
Random rand = new Random();
textSwitcher.setText(String.valueOf(rand.nextInt()));

ViewSwitcher

比TextSwitcher和ImageSwitcher高級點，可以放的是view,但是有一點必須要注意，它只能有兩個直接子孩子，這裏以 ImageView爲演示例子，

• xml

   <ViewSwitcher
        android:id="@+id/viewSwitcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/first"
            />
        <ImageView
            android:src="@drawable/second"
            android:layout_width="100dp"
            android:layout_height="100dp" />

    </ViewSwitcher>

• 代碼中

slide_in_left = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left);
slide_out_right = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right);
viewSwitcher.setInAnimation(slide_in_left);
viewSwitcher.setOutAnimation(slide_out_right);

通過下面代碼進行切換

 viewSwitcher.showNext();
 viewSwitcher.showPrevious();
 經測試，兩個方法，都可以切換下一個。