Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Índice

  • Introdução
  • Uso
  • Atributos

Índice
outlinetrue
exclude.*ndice
stylenone


Objetivo

O objetivo deste guia é mostrar ao usuário como utilizar o componente FluigSdkMediaView e quais os seus atributos.

...

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.

Este componente é uma subclasse de SurfaceView e, portanto, possui todas as funcionalidades já presentes nesta classe.

Nota
titleImportante

Antes de utilizar o componente, não esqueça de importar o módulo de componentes do SDK. Para saber como, clique aqui.


Uso

 

Atributos

No seu projeto, este componente pode ser utilizado no XML de um layout ou dentro de uma classe Java.

O visual e comportamento do FluigSdkMediaView segue o estilo definido pelo fluig Style Guide.

Bloco de código
languagexml
titleactivity_main.xml
<?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
languagejava
titleMainActivity.java
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 {...});
    }
}


Atributos

Esta seção explica o funcionamento de todos os atributos específicos do FluigSdkMediaView.


Nota

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"

Âncora
background-color
background-color

Background Color

int backgroundColor

Atributo padrão do SurfaceView.

Define a cor de fundo do componente. Caso seja usado junto ao backgroundColorEnd, define a cor do lado esquerdo de um gradiente.

Caso não seja definida, a cor padrão utilizada é #ed165a (Image Added).

Bloco de código
languagexml
titleexample.xml
collapsetrue
<sdk.fluig.com.ui.components.background.FluigSdkMediaView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/my_left_color" />
Bloco de código
languagejava
titleExample.java
collapsetrue
FluigSdkMediaView mediaView = (FluigSdkMediaView) findViewById(R.id.my_media_view_id);
int myLeftColor = ...;
mediaView.setBackgroundColor(myLeftColor);

Âncora
background-color-end
background-color-end

Background Color End

int backgroundColorEnd

Define a cor de fundo do lado direito de um gradiente.

Caso não seja definida, a cor padrão utilizada é #f15823 (Image Added).

Bloco de código
languagexml
titleexample.xml
collapsetrue
<sdk.fluig.com.ui.components.background.FluigSdkMediaView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:backgroundColor_end="@color/my_right_color" />
Bloco de código
languagejava
titleExample.java
collapsetrue
FluigSdkMediaView mediaView = (FluigSdkMediaView) findViewById(R.id.my_media_view_id);
int myRightColor = ...;
mediaView.setBackgroundColorEnd(myRightColor);

Âncora
image
image

Image

Drawable imageDrawable

Define a imagem utilizada como fundo. O componente faz as seguintes modificações na imagem fornecida:

  1. Aplica um clareamento
  2. Desfoca a imagem
  3. Altera o tamanho da imagem para preencher todo o componente, mantendo suas proporções


Bloco de código
languagexml
titleexample.xml
collapsetrue
<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
languagejava
titleExample.java
collapsetrue
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);

Âncora
video
video

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.

Painel

Não é aplicado qualquer filtro no vídeo. Portanto, para melhor conforto é recomendado que o vídeo seja em escala de cinza.

Aviso
titleImportante

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
languagexml
titleexample.xml
<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
languagejava
titleExample.java
FluigSdkMediaView mediaView = (FluigSdkMediaView) findViewById(R.id.my_media_view_id);
int myVideoId = ...;
mediaView.setVideo(myVideoId);

...