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