📜  Google启动器样式的Android开关图标实现

📅  最后修改于: 2021-05-13 15:48:16             🧑  作者: Mango

Google启动器样式(GLS)是应用于Google某些应用程序的显示元素的一组样式。还提供了用于开关视图或按钮的样式。但是这些样式的使用仅限于在Google工作的工程师。通过本文,我们希望与您共享一个开放源代码库,这将有助于我们实现GLS开关图标。以下是GLS开关图标的示例。请注意,我们将使用Kotlin语言实施此项目。

GLS开关图标的示例。

方法

步骤1:创建一个新项目

要在Android Studio中创建新项目,请参阅如何在Android Studio中创建/启动新项目。请注意,选择Kotlin作为编程语言。

步骤2:对build.gradle所做的更改(项目:)

XML
allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" } // Add this
    }
}


XML

    
      


XML


  
    
    
  
        
        
        />
  
        
        
  
    
  


Kotlin
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Switch state on Click
        button.setOnClickListener { switchIconView2.switchState() }
    }
}


XML


  
    
    
  
        
        
  
        
        
  
    
  


步骤3:将依赖项添加到build.gradle(模块:app)文件中

设置就绪后,转到根目录应用程序build.gradle并添加以下代码和依赖项。立即同步项目。

步骤4:添加所需的可绘制文件

转到应用程序> res>可绘制文件>右键单击>新建>可绘制资源文件,并将文件命名为ic_cloud ,并将以下代码添加到该文件中。

XML格式


    
      

步骤5:使用activity_main.xml文件

接下来,转到activity_main.xml文件,该文件代表项目的UI。如图所示,为SwitchIconView添加脚本。以下是activity_main.xml文件的代码。在代码内部添加了注释,以更详细地了解代码。

XML格式



  
    
    
  
        
        
        />
  
        
        
  
    
  

步骤6:使用MainActivity.kt文件

最后,转到MainActivity.kt文件,并参考以下代码。我们刚刚在图标上添加了onClickListner。下面是MainActivity.kt文件的代码。

科特林

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Switch state on Click
        button.setOnClickListener { switchIconView2.switchState() }
    }
}

输出:在模拟器上运行

实施醒目的风格

保持以上代码相同。只能在SwitchIconView内部的布局文件中进行更改。

对activity_main.xml文件所做的更改:

XML格式



  
    
    
  
        
        
  
        
        
  
    
  

输出:在模拟器上运行

想要一个节奏更快,更具竞争性的环境来学习Android的基础知识吗?
单击此处前往由我们的专家精心策划的指南,以使您立即做好行业准备!