Hướng dẫn thiết kê giao diện phát nhạc trên android

Sau ít nhất 3 năm kể từ lần cuối cùng Google thay đổi thiết kế khung chơi nhạc trên notification của Android, khu vực này lại tiếp tục được làm mới với nhiều màu hơn trong bản Android O Developer Preview. Thay vì chỉ là khung đen / xám tiệp màu với notification như trước, noti chơi nhạc giờ sẽ đổi theo tông màu chính của hình album nhằm giúp nó nổi bật hơn và dễ nhấn hơn, vừa trở nên đẹp và vui mắt hơn. Ngay cả khi bạn lock màn hình thì noti này cũng đổi màu theo nhìn đỡ chán. Ngoài ra ảnh album cũng được làm mờ một đoạn để tạo cảm giác mượt hơn, phù hợp với phần còn lại của Android O. Những ứng dụng như Google Play Music, Spotify, YouTube Music, Chrome... đều đã xài được giao diện chơi nhạc noti mới này, mình chưa rõ với các app khác như ZingMP3 hay NhacCuaTui thì sao, nhà phát triển có cần phải tùy biến gì thêm không. Anh em nào đang xài Android O thì cho mình biết với nhé.

Chúng ta cùng nhau tìm hiểu cách để làm ra một app nghe nhạc nhé. Đầu tiên là thiết kế giao diện cho ứng dụng.

MainStyle.xaml

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:MusicAppMP3">

MainWindow.xaml

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:uc="clr-namespace:MusicAppMP3" xmlns:local="clr-namespace:MusicAppMP3" mc:Ignorable="d" WindowStartupLocation="CenterScreen" FontFamily="Arial" Title="MainWindow" Height="650" Width="525"> BXH Việt Nam BXH Âu Mỹ BXH Hàn Quốc 01 Tên bài hát Tên ca sỹ Play

MainWindow.cs

using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Controls.Primitives; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace MusicAppMP3 {

/// 
  
/// Interaction logic for MainWindow.xaml  
/// 
  
public partial class MainWindow : Window, INotifyPropertyChanged  
{  
    private bool isCheckVN;  
    private bool isCheckEU;  
    private bool isCheckKO;  
    public bool IsCheckVN { get => isCheckVN; set { isCheckVN = value; isCheckEU = false; isCheckKO = false; OnPropertyChanged("IsCheckVN"); OnPropertyChanged("IsCheckEU"); OnPropertyChanged("IsCheckKO"); } }  
    public bool IsCheckEU { get => isCheckEU; set { isCheckEU = value; isCheckVN = false; isCheckKO = false; OnPropertyChanged("IsCheckVN"); OnPropertyChanged("IsCheckEU"); OnPropertyChanged("IsCheckKO"); } }  
    public bool IsCheckKO { get => isCheckKO; set { isCheckKO = value; isCheckEU = false; isCheckVN = false; OnPropertyChanged("IsCheckVN"); OnPropertyChanged("IsCheckEU"); OnPropertyChanged("IsCheckKO"); } }
    public MainWindow()  
    {  
        InitializeComponent();  
        ucSongInfo.BackToMain += UcSongInfo_BackToMain;
        lsbTopSongs.ItemsSource = new List() {"","","","","", "", "", "", "", "" };
        this.DataContext = this;
        IsCheckVN = true;  
    }      
    private void UcSongInfo_BackToMain(object sender, EventArgs e)  
    {  
        gridTop10.Visibility = Visibility.Visible;  
        ucSongInfo.Visibility = Visibility.Hidden;  
    }  
    private void Button_Click(object sender, RoutedEventArgs e)  
    {  
        gridTop10.Visibility = Visibility.Hidden;  
        ucSongInfo.Visibility = Visibility.Visible;  
    }
    public event PropertyChangedEventHandler PropertyChanged;  
    protected virtual void OnPropertyChanged(string newName)  
    {  
        if (PropertyChanged != null)  
        {  
            PropertyChanged(this, new PropertyChangedEventArgs(newName));  
        }  
    }  
}  

SongInfoUC.xaml

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:MusicAppMP3" mc:Ignorable="d" > Back Play song Lyric

SongInfoUC.cs

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace MusicAppMP3 {

/// 
  
/// Interaction logic for SongInfoUC.xaml  
/// 
  
public partial class SongInfoUC : UserControl  
{  
    public SongInfoUC()  
    {  
        InitializeComponent();  
    }
    private event EventHandler backToMain;  
    public event EventHandler BackToMain  
    {  
        add { backToMain += value; }  
        remove { backToMain -= value; }  
    }
    private void Button_Click(object sender, RoutedEventArgs e)  
    {  
        if (backToMain != null)  
            backToMain(this, new EventArgs());  
    }  
}  

Download full project

xNet

Reg Test

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Thiết kế giao diện app nghe nhạc MP3 dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.