Índice
...
Índice |
---|
outline | true |
---|
exclude | .*ndice |
---|
style | none |
---|
|
Objetivo
O objetivo deste guia é mostrar ao usuário como utilizar o componente FluigSdkMediaView e quais os seus atributos.
...
O FluigSdkMediaView
é o principal componente de background personalizado do fluig SDK Android. Este componente deve ser utilizado quando se deseja personalizar o fundo de uma Activity
ou Fragment
do seu aplicativo.
...
Nota |
---|
|
Antes de utilizar o componente, não esqueça de importar o módulo de componentes do SDK. Para saber como, clique aqui. |
...
Uso
No seu projeto, este componente pode ser utilizado no XML de um layout ou dentro de uma classe Java.
...
Bloco de código |
---|
language | xml |
---|
title | activity_main.xml |
---|
collapse | true |
---|
|
<?xml version="1.0" encoding="utf-8"?>
<merge
xmlns:android="http://schemas.android.com/apk/res/android">
<sdk.fluig.com.ui.components.background.FluigSdkMediaView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/my_text" />
</LinearLayout>
</merge> |
Bloco de código |
---|
language | java |
---|
title | MainActivity.java | collapse | true |
---|
|
import ...
import sdk.fluig.com.ui.components.background.FluigSdkMediaView;
public class MainActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_layout);
FluigSdkMediaView mediaView = (...);
mediaView.setOnLongClickListener(new OnLongClickListener {...});
}
} |
...
Esta seção explica o funcionamento de todos os atributos específicos do FluigSdkMediaView
.
...
Nota |
---|
Nos XMLs, lembre-se de importar Caso o atributo não seja padrão do SurfaceView , nos XMLs será necessário importar o namespace abaixo. xmlns:app="http://schemas.android.com/apk/res-auto" |
...
Gradient Enabled
boolean gradientEnabled
Define se o componente usará um gradiente horizontal de duas cores como fundo.
Este atributo pode ser alterado diretamente somente pelo XML. Nas classes Java, basta chamar um dos métodos que alteram a cor do gradiente.
...
language | xml |
---|
title | example.xml |
---|
collapse | true |
---|
...
...
language | java |
---|
title | Example.java |
---|
collapse | true |
---|
...
...
Background Color
int backgroundColor
Atributo padrão do SurfaceView
.
...
Gradient Left Color
int leftColor
Define a cor de fundo do componente. Caso seja usado junto ao backgroundColorEnd, define a cor do lado esquerdo do de um gradiente.
Caso não seja definida, a cor padrão utilizada é #ed165a ()
.
...
...
.
Bloco de código |
---|
language | xml |
---|
title | example.xml |
---|
collapse | true |
---|
|
<sdk.fluig.com.ui.components.background.FluigSdkMediaView
android:layout_width="match_parent"
android:layout_height="match_parent"
appandroid:gradient_leftColorbackground="@color/my_left_color" /> |
Bloco de código |
---|
language | java |
---|
title | Example.java |
---|
collapse | true |
---|
|
FluigSdkMediaView mediaView = (FluigSdkMediaView) findViewById(R.id.my_media_view_id);
int myLeftColor = ...;
mediaView.setGradientLeftColor(myLeftColor);
//é possível alterá-lo com o método setGradient() também
int rightColor = ...;
mediaView.setGradient(myLeftColor, rightColorsetBackgroundColor(myLeftColor); |
...
...
...
...
...
...
...
Background Color End
int rightColorbackgroundColorEnd
Define a cor de fundo do lado esquerdo do direito de um gradiente.
Caso não seja definida, a cor padrão utilizada é #f15823 ()
.
Nota |
---|
|
Este atributo é ignorado, caso gradientEnabled não esteja habilitado. |
Bloco de código |
---|
language | xml |
---|
title | example.xml |
---|
collapse | true |
---|
|
<sdk.fluig.com.ui.components.background.FluigSdkMediaView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:gradientbackgroundColor_rightColorend="@color/my_right_color" /> |
Bloco de código |
---|
language | java |
---|
title | Example.java |
---|
collapse | true |
---|
|
FluigSdkMediaView mediaView = (FluigSdkMediaView) findViewById(R.id.my_media_view_id);
int myRightColor = ...;
mediaView.setGradientRightColor(myRightColor);
//é possível alterá-lo com o método setGradient() também
int leftColor = ...;
mediaView.setGradient(leftColor, setBackgroundColorEnd(myRightColor); |
Image
Drawable imageDrawable
...
- Aplica um clareamento
- Desfoca a imagem
- Altera o tamanho da imagem para preencher todo o componente, mantendo suas proporções
...
Bloco de código |
---|
language | xml |
---|
title | example.xml |
---|
collapse | true |
---|
|
<sdk.fluig.com.ui.components.background.FluigSdkMediaView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:image="@drawable/my_image" /> |
Bloco de código |
---|
language | java |
---|
title | Example.java |
---|
collapse | true |
---|
|
FluigSdkMediaView mediaView = (FluigSdkMediaView) findViewById(R.id.my_media_view_id);
mediaView.setImage(R.drawable.my_image);
//caso tenha uma instância de Drawable
Drawable myImage = ...;
mediaView.setImage(myImage); |
...
Solid Color
int solidColor
Define a cor de fundo do componente para uma única cor.
Caso não seja definida, a cor padrão utilizada é #a0a0a0 (Image Removed)
.
Nota |
---|
|
Este atributo é ignorado, caso gradientEnabled esteja habilitado. |
Bloco de código |
---|
language | xml |
---|
title | example.xml |
---|
collapse | true |
---|
|
<sdk.fluig.com.ui.components.background.FluigSdkMediaView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:solidColor="@color/my_color" /> |
Bloco de código |
---|
language | java |
---|
title | Example.java |
---|
collapse | true |
---|
|
FluigSdkMediaView mediaView = (FluigSdkMediaView) findViewById(R.id.my_media_view_id);
int myColor = ...;
mediaView.setSolidColor(myColor);
//caso queira usar a cor padrão
mediaView.setDefaultSolidColor(); |
Video
int videoId
Define o vídeo que irá tocar no fundo. O vídeo é ajustado para preencher todo o componente, mantendo sua proporção, e repete indefinidamente.
Nota |
---|
title | Importante Painel |
---|
Não é aplicado qualquer filtro no vídeo. Portanto, o para melhor conforto é recomendado é que o vídeo seja em escala de cinza para melhor conforto visual. |
Aviso |
---|
|
Escolha um vídeo apropriado para a tela que usará o componente. Caso a tela permita somente orientação retrato, utilize um vídeo que vertical. Não utilize resoluções muito altas, caso contrário poderá ocorrer problemas na reprodução do vídeo. |
Bloco de código |
---|
language | xml |
---|
title | example.xml |
---|
collapse | true |
---|
|
<sdk.fluig.com.ui.components.background.FluigSdkMediaView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:video="@raw/my_video" /> |
Bloco de código |
---|
language | java |
---|
title | Example.java | collapse | true |
---|
|
FluigSdkMediaView mediaView = (FluigSdkMediaView) findViewById(R.id.my_media_view_id);
int myVideoId = ...;
mediaView.setVideo(myVideoId); |